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


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 相关文章推荐
js可突破windows弹退效果代码
Aug 09 Javascript
Jquery 数据选择插件Pickerbox使用介绍
Aug 24 Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
Nov 19 Javascript
js图片处理示例代码
May 12 Javascript
javascript中undefined与null的区别
Aug 16 Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
Jan 10 Javascript
Javascript HTML5 Canvas实现的一个画板
Apr 12 Javascript
JavaScript反弹动画效果的实现代码
Jul 13 Javascript
JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
Jun 07 Javascript
Vue自定义弹窗指令的实现代码
Aug 13 Javascript
vue实现form表单与table表格的数据关联功能示例
Jan 29 Javascript
微信小程序实现吸顶效果
Jan 08 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生成HTML静态页面实例代码
2008/08/31 PHP
php中使用临时表查询数据的一个例子
2013/02/03 PHP
twig里使用js变量的方法
2016/02/05 PHP
PHP中时间加减函数strtotime用法分析
2017/04/26 PHP
php基于自定义函数记录log日志方法
2017/07/21 PHP
PHP session垃圾回收机制实例分析
2019/06/28 PHP
javascript 用记忆函数快速计算递归函数
2010/03/15 Javascript
nodejs下打包模块archiver详解
2014/12/03 NodeJs
jquery控制显示服务器生成的图片流
2015/08/04 Javascript
基于HTML模板和JSON数据的JavaScript交互(移动端)
2016/04/06 Javascript
js多功能分页组件layPage使用方法详解
2016/05/19 Javascript
JQuery和HTML5 Canvas实现弹幕效果
2017/01/04 Javascript
简单实现IONIC购物车功能
2017/01/10 Javascript
大白话讲解JavaScript的Promise
2017/04/06 Javascript
AjaxUpLoad.js实现文件上传
2018/03/05 Javascript
react-native android状态栏的实现
2018/06/15 Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
2018/09/14 Javascript
详解JS取出两个数组中的不同或相同元素
2019/03/20 Javascript
vue.js实现照片放大功能
2020/06/23 Javascript
Python模拟百度登录实例详解
2016/01/20 Python
python中enumerate函数遍历元素用法分析
2016/03/11 Python
Python使用lxml模块和Requests模块抓取HTML页面的教程
2016/05/16 Python
Django学习教程之静态文件的调用详解
2018/05/08 Python
python 分离文件名和路径以及分离文件名和后缀的方法
2018/10/21 Python
python实现K近邻回归,采用等权重和不等权重的方法
2019/01/23 Python
详解10个可以快速用Python进行数据分析的小技巧
2019/06/24 Python
Python实现Selenium自动化Page模式
2019/07/14 Python
python 对任意数据和曲线进行拟合并求出函数表达式的三种解决方案
2020/02/18 Python
python右对齐的实例方法
2020/07/05 Python
python实现自动清理重复文件
2020/08/24 Python
Python实现定时监测网站运行状态的示例代码
2020/09/30 Python
python tkinter实现下载进度条及抖音视频去水印原理
2021/02/07 Python
自荐信不宜过于夸大
2013/11/06 职场文书
公司授权委托书格式样本
2014/10/01 职场文书
四风问题专项整治工作情况报告
2014/10/28 职场文书
2015欢度元旦标语口号
2014/12/09 职场文书