业务场景:点击对应的按钮颜色出现在对应的按钮上
实现步骤:
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
} ],
html代码:
/*
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,
})
}
},