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


Posted in Javascript onJune 09, 2020

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

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

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

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

总结

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

Javascript 相关文章推荐
通过JAVASCRIPT读取ASP设定的COOKIE
Feb 15 Javascript
jQuery 1.2.x 升? 1.3.x 注意事项
May 06 Javascript
细说javascript函数从函数的构成开始
Aug 29 Javascript
Javascript中prototype属性实现给内置对象添加新的方法
May 14 Javascript
Extjs实现下拉菜单效果
Apr 01 Javascript
Bootstrap基本布局实现方法详解
Nov 25 Javascript
了解ESlint和其相关操作小结
May 21 Javascript
微信小程序基于canvas渐变实现的彩虹效果示例
May 03 Javascript
layui动态表头的实现代码
Aug 22 Javascript
JS继承定义与使用方法简单示例
Feb 19 Javascript
我所理解的JavaScript中的this指向
Sep 04 Javascript
微前端qiankun改造日渐庞大的项目教程
Jun 21 Javascript
vue项目或网页上实现文字转换成语音播放功能
Jun 09 #Javascript
浅谈vue的第一个commit分析
Jun 08 #Javascript
从零开始在vue-cli4配置自适应vw布局的实现
Jun 08 #Javascript
详解Vue Cli浏览器兼容性实践
Jun 08 #Javascript
解决微信授权成功后点击按返回键出现空白页和报错的问题
Jun 08 #Javascript
微信h5静默和非静默授权获取用户openId的方法和步骤
Jun 08 #Javascript
基于javascript处理二进制图片流过程详解
Jun 08 #Javascript
You might like
PHP程序员最常犯的11个MySQL错误小结
2010/11/20 PHP
Window下PHP三种运行方式图文详解
2013/06/11 PHP
Linux下编译redis和phpredis的方法
2016/04/07 PHP
PHP实现的文件操作类及文件下载功能示例
2016/12/24 PHP
php处理静态页面:页面设置缓存时间实例
2017/06/22 PHP
Highslide.js是一款基于js实现的网页中图片展示插件
2020/03/30 Javascript
jquery实用代码片段集合
2010/08/12 Javascript
jquery live()调用不存在的解决方法
2014/02/26 Javascript
JS判断当前页面是否在微信浏览器打开的方法
2015/12/08 Javascript
AngularJS 中的指令实践开发指南(一)
2016/03/20 Javascript
json对象转为字符串,当做参数传递时加密解密的实现方法
2016/06/29 Javascript
javascript创建含数字字母的随机字符串方法总结
2016/08/01 Javascript
轻松掌握JavaScript中介者模式
2016/08/26 Javascript
jquery 实现回车登录详解及实例代码
2016/10/23 Javascript
jQuery基本选择器和层次选择器学习使用
2017/02/27 Javascript
用POSTMAN发送JSON格式的POST请求示例
2018/09/04 Javascript
详解NodeJS Https HSM双向认证实现
2019/03/12 NodeJs
jquery实现自定义树形表格的方法【自定义树形结构table】
2019/07/12 jQuery
浅谈layui 数据表格前后台传值的问题
2019/09/12 Javascript
JS对日期操作封装代码实例
2019/11/08 Javascript
[20:46]Ti4循环赛第三日VG vs DK
2014/07/12 DOTA
python写xml文件的操作实例
2014/10/05 Python
python将文本转换成图片输出的方法
2015/04/28 Python
Python Matplotlib库入门指南
2015/05/18 Python
Python中使用OpenCV库来进行简单的气象学遥感影像计算
2016/02/19 Python
Python跳出多重循环的方法示例
2019/07/03 Python
python 检查数据中是否有缺失值,删除缺失值的方式
2019/12/02 Python
postman和python mock测试过程图解
2020/02/22 Python
详解HTML5 canvas绘图基本使用方法
2018/01/29 HTML / CSS
美国Max仓库:Max Warehouse
2020/05/31 全球购物
Smilodox官方运动服装店:从运动服到健身配件
2020/08/27 全球购物
GC是什么?为什么要有GC?
2013/12/08 面试题
先进个人事迹材料
2014/01/25 职场文书
人事任命书格式
2014/06/05 职场文书
治庸问责心得体会
2014/09/12 职场文书
教师实习自我鉴定总结
2019/08/20 职场文书