微信小程序?qū)崿F(xiàn)YDUI的ScrollTab組件

第微信小程序?qū)崿F(xiàn)YDUI的ScrollTab組件本文實例為大家分享了微信小程序?qū)崿F(xiàn)滾動選項卡效果的具體代碼，供大家參考，具體內(nèi)容如下

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

!--列表滾動區(qū)--

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:['今日特惠','煙灶推薦','凈水飲水推薦','洗碗機推薦','電熱推薦','燃熱推薦','消毒柜推薦','嵌入式推薦','商用電器','活動