微信小程序模仿分类导航实现多个tab 页

微信小程序模仿分类导航实现多个tab 页功能：如图

l5PsXOTCzU.gif

话不多说，也不知道说啥，直接上代码：

wxml：

  全部
  分类
  游戏

  应用
  社交



  
    全部内容列表
    全部内容列表
    全部内容列表
    全部内容列表
  

  
    分类内容列表
    分类内容列表
    分类内容列表
    分类内容列表
  

  
    游戏内容列表
    游戏内容列表
    游戏内容列表
    游戏内容列表
  

  
    应用内容列表
    应用内容列表
    应用内容列表
    应用内容列表
  

  
    社交内容列表
    社交内容列表
    社交内容列表
    社交内容列表
  

wxss：

.swiper-tab {
  width: 100%;
  border-bottom: 2rpx solid #ccc;
  text-align: center;
  height: 88rpx;
  line-height: 88rpx;
  display: flex;
  flex-flow: row;
  justify-content: space-between;
}

.swiper-tab-item {
  width: 30%;
  color: #434343;
  /* border:1px solid #ccc; */
}

.active {
  color: rgb(89, 246, 160);
  border-bottom: 4rpx solid rgb(89, 246, 128);
}

swiper {
  text-align: center;
}

.all .list {
  height: 30pt;
}

.clairy .list {
  height: 30pt;
}

.game .list {
  height: 30pt;
}

.application .list {
  height: 30pt;
}

.social .list {
  height: 30pt;
}

js：

var app = getApp()
Page({
  data: {
    currentTab: 0
  },
  onLoad: function(options) {
    // 页面初始化 options为页面跳转所带来的参数
  },
  //滑动切换
  swiperTab: function(e) {
    var that = this;
    that.setData({
      currentTab: e.detail.current
    });
  },
  //点击切换 
  clickTab: function(e) {
    var that = this;
    if (this.data.currentTab === e.target.dataset.current) {
      return false;
    } else {
      that.setData({
        currentTab: e.target.dataset.current
      })
    }
  }
})

原文作者：祈澈姑娘
原文链接：https://www.jianshu.com/u/05f416aefbe1创作不易，转载请告知
90后前端妹子，爱编程，爱运营，爱折腾。坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。