当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 微信小程序中的列表切换功能实例代码详解

微信小程序中的列表切换功能实例代码详解

2020年06月23日  | 移动技术网IT编程  | 我要评论

在这里插入图片描述

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

wxml中的代码如下：

<!-- 标签页面标题 -->
<view class="tab">
  <view class="tab-item {{tab==0?'active':''}}" bindtap="changeitem" data-item="0">音乐推荐</view>
  <view class="tab-item {{tab==1?'active':''}}" bindtap="changeitem" data-item="1">播放器</view>
  <view class="tab-item {{tab==2?'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里面

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

在这里插入图片描述

总结

到此这篇关于微信小程序中的列表切换功能实例代码详解的文章就介绍到这了,更多相关微信小程序列表切换内容请搜索移动技术网以前的文章或继续浏览下面的相关文章希望大家以后多多支持移动技术网！

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网