微信小程序tab选项卡切换

tab.html

  
    
      {
    {item}}
    
  

  
    111
    222
    333
  

tab.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    tabNav: ['全部', '充值', '消费'],
    currentIndex:0
  },
  onTabNav: function (e) {
    var indexTag = e.currentTarget.dataset.index;
    console.log(indexTag);
    this.setData({
      currentIndex:indexTag
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

tab.css

.tab-nav {
  width: 100%;
  display: flex;
}
.tab-nav text {
  display: block;
  width: 33.33%;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
}
.active{
  color: #f9b640;
}