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

l5PsXOTCzU.gif

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

wxml：

view class="swiper-tab"  view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab"全部/view  view class="swiper-tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="clickTab"分类/view  view class="swiper-tab-item {{currentTab==2?'active':''}}" data-current="2" bindtap="clickTab"游戏/view  view class="swiper-tab-item {{currentTab==3?'active':''}}" data-current="3" bindtap="clickTab"应用/view  view class="swiper-tab-item {{currentTab==4?'active':''}}" data-current="4" bindtap="clickTab"社交/view/viewswiper current="{{currentTab}}" duration="300" bindchange="swiperTab"  swiper-item class="all"    view class="list"全部内容列表/view    view class="list"全部内容列表/view    view class="list"全部内容列表/view    view class="list"全部内容列表/view  /swiper-item  swiper-item class="clairy"    view class="list"分类内容列表/view    view class="list"分类内容列表/view    view class="list"分类内容列表/view    view class="list"分类内容列表/view  /swiper-item  swiper-item class="game"    view class="list"游戏内容列表/view    view class="list"游戏内容列表/view    view class="list"游戏内容列表/view    view class="list"游戏内容列表/view  /swiper-item  swiper-item class="application"    view class="list"应用内容列表/view    view class="list"应用内容列表/view    view class="list"应用内容列表/view    view class="list"应用内容列表/view  /swiper-item  swiper-item class="social"    view class="list"社交内容列表/view    view class="list"社交内容列表/view    view class="list"社交内容列表/view    view class="list"社交内容列表/view  /swiper-item/swiper

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

原文作者：祈澈姑娘
关注「编程微刊」公众号 ，后台回复「领取资源」，获取IT资源和小程序500G干货大全。