微信小程序 tab选项卡

Posted 2022-07-09 xm666

<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
    )

  ,