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

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

DEMO下载

效果图

YDUI的ScrollTab（滚动选项卡）

WXML

!--导航--

view

scroll-viewscroll-x="true"

textbindtap="getStatus"id="NAV{{index}}"class="tui-nav-li{{index===status'tui-nav-active':''}}"data-index="{{index}}"wx:for="{{navList}}"{{item}}/text

/scroll-view

/view

!--列表滚动区--

view

scroll-viewscroll-y="true"scroll-into-view="NAV{{status}}"scroll-with-animation="true"

viewwx:for="{{navList}}"

viewid="NAV{{index}}"{{item}}/view

view{{item}}列表{{index}}/view

/view

/scroll-view

/view

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;

JS

Page({

data:{

navList:['今日特惠','烟灶推荐','净水饮水推荐','洗碗机推荐','电热推荐','燃热推荐','消毒柜推荐','嵌入式推荐','商用电器','活动