这篇文章将为大家详细讲解有关微信小程序如何实现YDUI的ScrollTab组件，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
WXML
<!--导航 -->
<view class="tui-fixed-left">
<scroll-view class="tui-city-scroll" scroll-x="true">
<text bindtap="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 class="tui-fixed-y">
<scroll-view class="tui-city-scroll-y" scroll-y="true" scroll-into-view="NAV{{status}}" scroll-with-animation="true">
<view wx:for="{{navList}}">
<view id="NAV{{index}}" class="tui-list-head">{{item}}</view>
<view class="tui-list-li">{{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: 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: ['今日特惠', '烟灶推荐', '净水饮水推荐', '洗碗机推荐', '电热推荐', '燃热推荐', '消毒柜推荐', '嵌入式推荐', '商用电器', '活动说明'],
status: 0
},
getStatus(e) {
this.setData({ status: e.currentTarget.dataset.index })
}
})关于“微信小程序如何实现YDUI的ScrollTab组件”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
