微信小程序 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
    })

  },

猜你喜欢

转载自www.cnblogs.com/xm666/p/11348948.html