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

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

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

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>
</view>

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

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

关注「前端视听」公众号 ，在微信后台回复「小程序」，获取小程序开发制作全套教程及123套源码，价值1998元。公众号回复“1”，拉你进程序员技术讨论群.