この記事では主に、YDUI を実装するための WeChat アプレットの ScrollTab コンポーネントとスクロール タブ効果について詳しく紹介します。興味のある方は参考にしていただければ幸いです。
デモのダウンロード
レンダリング
YDUIのScrollTab (スクロールタブ)
WXML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!--导航 -->
<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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 | .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
1 2 3 4 5 6 7 8 9 | Page({
data: {
navList: ['今日特惠', '烟灶推荐', '净水饮水推荐', '洗碗机推荐', '电热推荐', '燃热推荐', '消毒柜推荐', '嵌入式推荐', '商用电器', '活动说明'],
status: 0
},
getStatus(e) {
this.setData({ status: e.currentTarget.dataset.index })
}
})
|
ログイン後にコピー
概要
実装原理と処理方法YDUI を実装する ScrollNav コンポーネントである WeChat アプレットと同じです。微妙な違いは、WXSS スタイル シートが変更されていることです。
関連する推奨事項:
タブ関数を実装するための 2 つの jQuery メソッド
JavaScript プラグイン Tab の詳細な説明
タブ切り替え効果を実現するための jquery
以上がWeChat アプレット YDUI の ScrollTab コンポーネントのスクロール タブ効果の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。