这篇文章主要讲解了微信小程序中如何实现列表切换功能，内容清晰明了，对此有兴趣的小伙伴可以学习一下，相信大家阅读完之后会有帮助。

感觉这列表切换有点类似于轮播图，而且感觉这代码直接可以拿来用，稍微改一改样式什么的就OK了，列表切换也是用到的地方也很多

wxml中的代码如下：

<!-- 标签页面标题 --><view class="tab"> <view class="tab-item {{tab==0&#63;'active':''}}" bindtap="changeItem" data-item="0">音乐推荐</view> <view class="tab-item {{tab==1&#63;'active':''}}" bindtap="changeItem" data-item="1">播放器</view> <view class="tab-item {{tab==2&#63;'active':''}}" bindtap="changeItem" data-item="2">播放列表</view></view><!-- 内容 --><view class="content"> <swiper current="{{item}}" bindchange="changeTab"> <swiper-item> <include src="info.wxml"/> </swiper-item> <swiper-item> <include src="player.wxml"/> </swiper-item> <swiper-item> <include src="playerlist.wxml"/> </swiper-item> </swiper></view>

在js页面的data中

wxss样式：

.tab{ display: flex;}.tab-item{ flex: 1; font-size:10pt ; text-align: center; line-height: 72rpx; border-bottom: 6rpx solid #eee;}.content{ flex: 1;}.content>swiper{ height: 100%;}.tab-item.active{ color: #c25b5b; border-bottom-color:#c25b5b ;}

想设置这里的样式可以再.tab-item里面

可以根据自己的审美设置 ，类似于下面这样

看完上述内容，是不是对微信小程序中如何实现列表切换功能有进一步的了解，如果还想学习更多内容，欢迎关注亿速云行业资讯频道。