微信小程序中的列表切换功能实例代码详解
更新时间:2020年06月09日 14:17:42 作者:努力向上的阿潮
这篇文章主要介绍了微信小程序中的列表切换功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
感觉这列表切换有点类似于轮播图,而且感觉这代码直接可以拿来用,稍微改一改样式什么的就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里面
可以根据自己的审美设置 ,类似于下面这样
总结
到此这篇关于微信小程序中的列表切换功能实例代码详解的文章就介绍到这了,更多相关微信小程序列表切换内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
现在很多的独立博客和网站如人人网等,都使用了让侧边栏模块随滚动条滑动而位置固定的效果2013-03-03JS & JQuery 动态添加 select option
这篇文章主要介绍了JS & JQuery 动态添加 select option 的相关资料,非常不错具有参考借鉴价值,感兴趣的朋友一起看下吧2016-06-06弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
这篇文章主要介绍了弱类型语言javascript开发中的一些坑,结合实例形式总结分析了javascript开发中关于变量、函数、数组、对象、作用域等相关知识点常见易错问题,需要的朋友可以参考下2019-08-08
最新评论