码迷,mamicode.com
首页 > 微信 > 详细

微信小程序 tab选项卡

时间:2019-08-13 22:27:39      阅读:151      评论:0      收藏:0      [点我收藏+]

标签:关于   首页   each   get   show   span   选项   hid   bin   

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

  },

 

微信小程序 tab选项卡

标签:关于   首页   each   get   show   span   选项   hid   bin   

原文地址:https://www.cnblogs.com/xm666/p/11348948.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!