微信小程序 tab选项卡
<view class="nav"> <view class="{{style[0]}}" data-id="{{0}}" bind:tap="clickFu">首页</view> <view class="{{style[1]}}" data-id="{{1}}" bind:tap="clickFu">关于我们</view> </view> <view hidden="{{show[0]}}">内容一</view> <view hidden="{{show[1]}}">内容二</view>
/** * 页面的初始数据 */ data: { show:[false,true], style: ['active', ''] }, /*导航点击*/ clickFu(e){ //获取点击后的data-id let id = e.currentTarget.dataset.id; //把this.data.show都改成true this.data.show.forEach((item,index)=> { this.data.show[index] = true; this.data.style[index] = ''; }); //点击索引改变为false this.data.show[id] = false; this.data.style[id] = 'active'; this.setData({ show:this.data.show, style: this.data.style }) },