小程序tab实现页面切换

本文实例为大家分享了小程序tab实现页面切换的具体代码，供大家参考，具体内容如下

.wxml

      
        待接收(0)
        

      
    
      
        处理中(1)
        

      
 
        
        已完成(1)
        

      
  
 
  
  
      
      {{currentIndex}}
      
       
             {{currentIndex}}
      
       
             {{currentIndex}}
      

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。