小程序怎么做tab选项卡!

原来是准备用swiper做的!

这样有滑动功能!

后面发现用这个做!完全没法固定高度! 就取消了!做普通的tab!

首先我们定义一个变量

currentIndex :0

用来判断是哪个显示哪个隐藏!

下面是tab的按钮

<textclass="li {{0 ==currentIndex ? 'this' : ''}}" data-idx='0'>
<text class="li {{1 == currentIndex ? 'this' : ''}}" data-idx='1'>
<text class="li {{2 == currentIndex ? 'this' : ''}}" data-idx='2'>

下面是tab的显示

<textclass="tabzt {{0 ==currentIndex ? 'this' : ''}}">
<text class="tabzt {{1 == currentIndex ? 'this' : ''}}">
<text class="tabzt {{2 == currentIndex ? 'this' : ''}}">

这样我们就可以通过改变currentIndex的值来增加class为this 来控制显示隐藏了

下面是增加的js

titleClick: function (e) {
        console.log(e);//我们输出E会发现,小程序会自动创建相应变量在e.currentTagert.dataset
      this.setData({
        //拿到当前索引并动态改变
        currentIndex: e.currentTarget.dataset.idx
      })
  
  },

image.png

好了试下吧!

写的好!

微信扫一扫赏大洋