这篇文章主要为大家详细介绍了微信小程序实现ydui的scrolltab组件，滚动选项卡效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序实现滚动选项卡效果的具体代码，供大家参考，具体内容如下
DEMO下载
效果图
YDUI的ScrollTab（滚动选项卡）
WXML
{{item}} {{item}} {{item}} 列表 {{index}}
WXSS
.tui-fixed-x{
margin-left: 130px;
position: fixed;
top: 0;
left: 0;
}
.tui-fixed-left{
width: 120px;
height: 100%;
border-right: 1px solid #dfdfdf;
position: fixed;
background-color: #f5f5f5;
top: 0;
left: 0;
}
.tui-list-head{
background-color: #fff;
margin-bottom: 15px;
}
.tui-city-scroll{
width: 100%;
}
.tui-nav-li{
font-size: 30rpx;
padding: 0 10px;
height: 100rpx;
line-height: 100rpx;
width: 100px;
display: block;
border-bottom: 1px solid #dfdfdf;
position: relative;
z-index: 10;
}
.tui-nav-active{
background-color: #fff;
}
.tui-fixed-y{
margin-left: 120px;
padding-left: 10px;
padding-right: 10px;
height: 100%;
position: fixed;
bottom: 0;
right: 0;
}
.tui-city-scroll-y{
height: 100%;
box-sizing: border-box;
}
.tui-list-head{
height: 50px;
line-height: 50px;
text-align: center;
font-size: 30rpx;
color: blue;
}
.tui-list-li{
height: 400px;
padding: 10rpx;
color: #fff;
font-size: 50rpx;
background-color: lightgreen;
}JS
睿拓企业网站系统1.2
下载
睿拓智能网站系统-睿拓企业网站系统1.2免费版软件大小:6M运行环境：asp+access本版本是永州睿拓信息企业网站管理系统包括了企业网站常用的各种功能，带完整的后台管理系统，本程序无任何功能限制下载即可使用，具体功能如下。1.网站首页2.会员注册3.新闻文章模块4.产品图片展示模块5.人才招聘模块6.在线留言模块7.问卷调查模块8.联系我们模块9.在线QQ客服系统10.网站流量统计系统11.后
Page({
data: {
navList: ['今日特惠', '烟灶推荐', '净水饮水推荐', '洗碗机推荐', '电热推荐', '燃热推荐', '消毒柜推荐', '嵌入式推荐', '商用电器', '活动说明'],
status: 0
},
getStatus(e) {
this.setData({ status: e.currentTarget.dataset.index })
}
})上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
