根据id来实现小程序tab切换，

本例根据绑定id来实现tab切换，但本例仍有缺陷，用for循环数据，无法实现切换。如有大神能够有更好方法，欢迎留言更正

WXML:

<view class="tab"> <view bindtap="tabs" class="{{tabArr.curHdIndex=='0'? 'active' : ''}}" id="0" data-id="0">tab-hd01</view> <view bindtap="tabs" class="{{tabArr.curHdIndex=='1'? 'active' : ''}}" id="1" data-id="1">tab-hd02</view> <view bindtap="tabs" class="{{tabArr.curHdIndex=='2'? 'active' : ''}}" id="2" data-id="2">tab-hd03</view> <view bindtap="tabs" class="{{tabArr.curHdIndex=='3'? 'active' : ''}}" id="3" data-id="3">tab-hd04</view>
</view> <view class="tabcon"> <view class="{{tabArr.curBdIndex=='0'? 'active' : ''}}">tab-bd01111</view> <view class="{{tabArr.curBdIndex=='1'? 'active' : ''}}">tab-bd02222</view> <view class="{{tabArr.curBdIndex=='2'? 'active' : ''}}">tab-bd03333</view> <view class="{{tabArr.curBdIndex=='3'? 'active' : ''}}">tab-bd04444</view>
</view>

WXSS:

.tab{display: flex;flex-direction:row; height: 50px;line-height: 50px;}
.tab view{width: 25%;text-align: center;
}
.tab .active{display: inline-block;color: #188eee;border-bottom: 1px #188eee solid;
}
.tabcon view{display: none;
}
.tabcon .active{display: inline-block;
}

Page({data: {tabArr: {curHdIndex: 0,curBdIndex: 0,}},tabs: function (e) {var dataId = e.currentTarget.id;var obj = {};obj.curHdIndex = dataId;obj.curBdIndex = dataId;this.setData({tabArr: obj}); }
});

转载于:https://www.cnblogs.com/yiweiyihang/p/6993958.html

根据id来实现小程序tab切换，相关推荐

navtab触底小程序_微信小程序TAB切换效果
微信小程序tab切换效果话不多说,先上效果图主要是让在一个WXML上面显示2个页面,用来分页展示东西. 直接上代码了: 首先是wxml {{item}} A页 B页然后是wxcss样式代码 .t ...
小程序tab切换效果
小程序实现tab切换很简单,只需要完成两部分. 1.页面 2.js触发时间先上效果: image.png 接下来介绍页面代码: 控制切换的Tab <view class="swipe ...
微信小程序 tab切换
设置背景颜色就直接在page里设置 page {background-color: rgb(242, 242, 242);} tab切换: navigator 页面链接传参的格式为url=&q ...
微信小程序 tab切换展示不同的内容
index.wxml <view class='shopDetail-box'><view class="tab-left" ><view class ...
微信小程序tab切换
一:获取数据,初始化存储切换下标的变量以及数据二:点击切换高亮同时设置子数据 1.定义变量 data: {list:[],//总数据tabIndex:0,//tab切换利用的下标childrenLi ...
微信小程序tab切换（点击标题切换，滑动屏幕切换）
效果图: WXML文件 <view class="tab"><scroll-view class="nav" scroll-x="t ...
微信小程序——tab切换内容
wxml: wxss: js: .wxml代码: <view class="body"> <view class="nav bc_white&quo ...
微信小程序-tab左右滑动切换
微信小程序-tab左右滑动切换一.简介 1.核心思想二.实现 1.wxml实现 2.js实现 3.wxss实现三.参考和总结四.优化 0.效果图 1.每个tab长度自适应 2.先前隔tab点击 ...
微信小程序Tab选项卡切换大集合
代码地址如下: http://www.demodashi.com/demo/14028.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...

根据id来实现小程序tab切换，

根据id来实现小程序tab切换，相关推荐

最新文章

热门文章