小程序顶部tab切换

小程序顶部tab切换

wxml:

// A code block
<view class="viewbox">
  <text data-num="1" bindtap="tapHandle" class="{
   
   {activeIndex==1?'activetext':''}}">电影</text>
  <text data-num="3" bindtap="tapHandle" class="{
   
   {activeIndex==3?'activetext':''}}">书籍</text>
  <text data-num="5" bindtap="tapHandle" class="{
   
   {activeIndex==5?'activetext':''}}">运动</text>
  <text data-num="8" bindtap="tapHandle" class="{
   
   {activeIndex==8?'activetext':''}}">兴趣</text>
</view>

注脚
data-num=“1”：给单个元素添加下标，点击后进行切换

js:
  data: {
    activeIndex: 0
  },
  tapHandle(e) {
     console.log(e);
    this.setData({
      activeIndex: e.target.dataset.num
    })
  }

wxss:

.viewbox{
  padding: 10rpx;
  display: flex;
  justify-content: space-between;
}
.activetext{
  color: pink;
}