欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-07-06 17:42:33
感觉这列表切换有点类似于轮播图,而且感觉这代码直接可以拿来用,稍微改一改样式什么的就ok了,列表切换也是用到的地方也很多wxml中的代码如下:

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

感觉这列表切换有点类似于轮播图,而且感觉这代码直接可以拿来用,稍微改一改样式什么的就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里面

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

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

总结

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