小程序tab实现页面切换（二）

.wxml

  <view class='title'>
      <view class='titleSel' bindtap='titleClick' data-idx='0'>
        <text>待接收(0)</text>
        <hr class="{{0 == currentIndex ? 'headerLineSel' : 'headerLineUnsel'}}" />
      </view>
    
      <view class='titleSel' bindtap='titleClick' data-idx='1'>
        <text>处理中(1)</text>
        <hr class="{{1 == currentIndex ? 'headerLineSel' : 'headerLineUnsel'}} " />
      </view>

        <view class='titleSel' bindtap='titleClick' data-idx='2'>
        <text>已完成(1)</text>
        <hr class="{{2 == currentIndex ? 'headerLineSel' : 'headerLineUnsel'}} " />
      </view>
  </view>

  <!--内容布局-->
  <view class="colors">
      <view class="colors1" wx:if="{{currentIndex==0}}">
      {{currentIndex}}
      </view>
       <view class="colors2" wx:if="{{currentIndex==1}}">
             {{currentIndex}}
      </view>
       <view class="colors3" wx:if="{{currentIndex==2}}">
             {{currentIndex}}
      </view>
  </view>

.wxss

page{
  width: 100%;
  height: 100%;
}
.container {
  height: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.title {
  width: 100%;
  height: 88rpx;
  background: white;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.titleSel {
  width: 33%;
  color: #5f6fee;
  font-size: 32rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.titleUnsel {
  color: #858fab;
  font-size: #858fab;
}

.headerLineSel {
  background: #5f6fee;
  height: 6rpx;
  width: 40rpx;
  position: relative;
  margin-top: 10rpx;
}

.headerLineUnsel {
  background: #fff;
  height: 6rpx;
  width: 40rpx;
  position: relative;
  margin-top: 10rpx;
}


.colors{
  width: 100%;
  height: 100%;
}

.colors1{
  width: 100%;
  height: 100%;
  background-color: royalblue;
}
.colors2{
  width: 100%;
  height: 100%;
  background-color: salmon;
}
.colors3{
  width: 100%;
  height: 100%;
  background-color: seagreen;
}

.js

data: {
    currentIndex: 0,
   
  },
 
  //用户点击tab时调用
  titleClick: function (e) {
    let currentPageIndex =
      this.setData({
        //拿到当前索引并动态改变
        currentIndex: e.currentTarget.dataset.idx
      })

      console.log(e.currentTarget.dataset.idx)
  },

边学边记！