业务场景:点击对应的按钮颜色出现在对应的按钮上
实现步骤:
1.在html循环tabs数据
2.点击按钮,获取tab的id,和长度,开始循环,做判断即可,代码一看就懂
js设置tab代码:
/* author:咔咔 wechat:fangkangfk address:陕西西安 */ tabs: [ { id: 0, uniuqeId: "uniqueId-0", name: "昨日数据", selected: !0, color: "#BEA67C" }, { id: 1, uniuqeId: "uniqueId-1", name: "全部数据", selected: !1 } ],
/* author:咔咔 wechat:fangkangfk address:陕西西安 */ <view class="m-tab"> <view bindtap="onTapChangeTab" data-tabid="{{item.id}}" style="color:{{item.color}}" wx:for="{{tabs}}" wx:key="uniqueId">{{item.name}}</view> </view> <view class="m-data" hidden='{{selects}}'> <view class="m-dataTime">昨日数据</view> <view class="m-dataArea"> <view class="m-dataItem"> <text>浏览量</text> <view>{{viewNumY}}</view> </view> </view> </view> <view class="m-data" hidden='{{select}}'> <view class="m-dataTime">总体数据</view> <view class="m-dataArea"> <view class="m-dataItem"> <text>浏览量</text> <view>{{viewNum}}</view> </view> </view> </view>
js操作代码:
/* author:咔咔 wechat:fangkangfk adderss:陕西西安 */ onTapChangeTab:function(a){ // console.log(e.currentTarget.dataset.tabid) var tabid = a.currentTarget.dataset.tabid; var that = this; for (var t = a.currentTarget.dataset.tabid, o = this.data.tabs, e = 0; e < o.length; e++) o[e].id == t ? (o[e].selected = !0, o[e].color = "#BEA67C") : (o[e].selected = !1, o[e].color = ""); this.setData({ tabs: o, page: 0, }); if(tabid == 1){ that.setData({ select: false, selects: true, }) }else{ that.setData({ select: true, selects: false, }) } },