微信小程序选项卡切换

最新推荐文章于 2026-05-14 09:39:30 发布

原创最新推荐文章于 2026-05-14 09:39:30 发布 · 1.2w 阅读

9 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

当前文章被以下社区和专栏收录：

在开发微信小程序的时候，会遇到选项卡切换，这里有一个小例子，可以做为参考，代码如下

结构部分:

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

<swiper
current="{{currentTab}}"
duration="300"
bindchange="swiperTab">
<swiper-item><view>热点</view></swiper-item>
<swiper-item><view>体育</view></swiper-item>
<swiper-item><view>社会</view></swiper-item>
</swiper>

JS部分

var app = getApp()
Page({
data: {
currentTab: 0
},
onLoad: function
(options) 
{
// 页面初始化 options为页面跳转所带来的参数

},
//滑动切换
swiperTab: function
(e) 
{
var that =
this;
that.setData({
currentTba: 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
})
}
}

})

样式部分

.swiper-tab{
width: 100%;
border-bottom: 
2rpx solid #ccc;
text-align: center;
height: 88rpx;
line-height: 
88rpx;
font-weight: 
bold;
}
.swiper-tab-item{
display: inline-block;
width: 33.33%;
color:red;
}
.active{
color:aqua;
border-bottom: 
4rpx solid
red;
}