前言
微信小程序中的 tab 切换功能可以说是用户所需的一个基础功能。本文将介绍如何通过微信小程序实现 tab 切换功能,为用户带来更为便捷和高效的小程序体验。
实现思路
其实这个小功能的实现非常简单,只需要通过一个标识控制选项的样式及显示的内容,当我们触发点击或者滑动事件时动态的改变标识的值即可。话不多说,下面直接上实例代码。
效果1:
wxml 文件
<view>
<!-- Tab布局 -->
<view class="navBox">
<view class="titleBox" wx:for="{{tabList}}" bindtap="tabsOn" data-idx="{{item.index}}">
<text class="{{item.index == tabsId ? 'fontColorBox' : ''}}">{{item.title}}</text>
<hr class="{{item.index == tabsId ? 'lineBox' : ''}}" />
</view>
</view>
<!-- 内容布局 -->
<swiper class="swiperTtemBox" bindchange="slideOn" current="{{tabsId}}" circular>
<!-- circular 启用循环滑动 -->
<swiper-item>
<view>装备内容</view>
</swiper-item>
<swiper-item>
<view>活动内容</view>
</swiper-item>
<swiper-item>
<view>功能内容</view>
</swiper-item>
</swiper>
</view>
js文件
Page({
data: {
// tab选项
tabList: [
{title: "装备",index: "0",},
{title: "运动",index: "1",},
{title: "功能",index: "2",}
],
tabsId: 0, //默认选型为装备
},
// 滑动时触发的事件
slideOn(e) {
// 拿到当前索引并动态改变
this.setData({
tabsId: e.detail.current
})
},
//点击tab时触发
tabsOn(e) {
this.setData({
//拿到当前索引并动态改变
tabsId: e.currentTarget.dataset.idx
})
},
})
wxss 文件
.navBox {
/* tab整体样式 */
height: 100rpx;
padding: 0px 20%;
display: flex;
align-items: center;
justify-content: space-around;
border-bottom: 18rpx solid rgb(243, 244, 249);
}
.fontColorBox {
/* 选中tab样式 */
color: black;
font-weight: bold;
}
.titleBox {
/* 未选中tab样式 */
color: rgb(168, 170, 175);
font-size: 28rpx;
display: flex;
flex-direction: column;
align-items: center;
}
.lineBox {
/* 线条样式 */
width: 32rpx;
height: 8rpx;
background: black;
margin-top: 10rpx;
border-radius: 4rpx;
}
.swiperTtemBox {
/* 内容样式 */
padding: 16rpx;
font-size: 28rpx;
height: calc(100vh - 150rpx);
}
效果2:
wxml 文件
<view class="tabBox">
<!-- Tab布局 -->
<view class="navBox">
<view class="titleBox" wx:for="{{tabList}}" bindtap="tabsOn" data-idx="{{item.index}}">
<text class="{{item.index == tabsId ? 'fontColorBox' : ''}}">{{item.title}}</text>
</view>
</view>
<!-- 内容布局 -->
<swiper class="swiperTtemBox" bindchange="slideOn" current="{{tabsId}}" circular>
<!-- circular 启用循环滑动 -->
<swiper-item>
<view>装备内容</view>
</swiper-item>
<swiper-item>
<view>活动内容</view>
</swiper-item>
<swiper-item>
<view>功能内容</view>
</swiper-item>
</swiper>
</view>
wxss 文件
.tabBox {
padding: 20rpx;
}
.navBox {
/* tab整体样式 */
height: 74rpx;
display: flex;
padding: 1.5% 1.5%;
border-radius: 50rpx;
background: #E5EEFD;
}
.fontColorBox,
.titleBox {
/* 共同样式 */
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.fontColorBox {
/* 选中tab样式 */
color: #fff;
font-weight: bold;
background: linear-gradient(151deg, #2F7EFC 0%, #7BADFC 100%);
border-radius: 50rpx;
}
.titleBox {
/* 未选中tab样式 */
color: #1A1A1A;
font-size: 28rpx;
display: flex;
flex-direction: column;
align-items: center;
}
.swiperTtemBox {
/* 内容样式 */
padding: 16rpx;
font-size: 28rpx;
height: calc(100vh - 150rpx);
}