微信小程序实现YDUI中ScrollTab组件

这篇文章主要为大家详细介绍了微信小程序实现ydui的scrolltab组件，滚动选项卡效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了微信小程序实现滚动选项卡效果的具体代码，供大家参考，具体内容如下

DEMO下载

效果图

YDUI的ScrollTab（滚动选项卡）

WXML

 !--导航 -- 
 view >
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
Page({
 data: {
 navList: [ #39;今日特惠 #39;, #39;烟灶推荐 #39;, #39;净水饮水推荐 #39;, #39;洗碗机推荐 #39;, #39;电热推荐 #39;, #39;燃热推荐 #39;, #39;消毒柜推荐 #39;, #39;嵌入式推荐 #39;, #39;商用电器 #39;, #39;活动说明 #39;],
 status: 0
 getStatus(e) {
 this.setData({ status: e.currentTarget.dataset.index })
})
总结
实现原理和处理方式都和微信小程序—-实现YDUI的ScrollNav组件一样，细微的差别在于WXSS样式表做了改变！
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
微信小程序 textarea 的使用方法

微信小程序 scroll-view实现上拉加载与下拉刷新的实例

微信小程序中的网络请求（post请求和get请求）


以上就是微信小程序实现YDUI中ScrollTab组件的详细内容，更多请关注php中文网其它相关文章！
 
  
 微信app下载
 
微信是一款手机通信软件，支持通过手机网络发送语音短信、视频、图片和文字。微信可以单聊及群聊，还能根据地理位置找到附近的人，带给大家全新的移动沟通体验，有需要的小伙伴快来保存下载体验吧！