好资源导航 » 文章资讯 » 微信小程序实现YDUI的ScrollTab组件

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

2023-09-16 22:52:05 58

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

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:1pxsolid#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:010px;
height:100rpx;
line-height:100rpx;
width:100px;
display:block;
border-bottom:1pxsolid#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;
}

Page({
data:{
navList:['今日特惠','烟灶推荐','净水饮水推荐','洗碗机推荐','电热推荐','燃热推荐','消毒柜推荐','嵌入式推荐','商用电器','活动说明'],
status:0
},
getStatus(e){
this.setData({status:e.currentTarget.dataset.index})
}
})

总结

实现原理和处理方式都和微信小程序—-实现YDUI的ScrollNav组件一样，细微的差别在于WXSS样式表做了改变！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
514930285
czq8825@qq.com

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

热门推荐

随机推荐