• 微信小程序 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
        })
    
      },
  • 相关阅读:
    Java SE
    Java SE
    Java SE
    Java SE
    Vocabulary: dockyard
    Vocabulary: Intercept
    Java SE
    MVG
    相关学习
    相机开发
  • 原文地址:https://www.cnblogs.com/xm666/p/11348948.html
Copyright © 2020-2023  润新知