ホームページ > WeChat アプレット > ミニプログラム開発 > WeChat アプレット YDUI の ScrollTab コンポーネントのスクロール タブ効果の詳細な説明

WeChat アプレット YDUI の ScrollTab コンポーネントのスクロール タブ効果の詳細な説明

小云云
リリース: 2018-02-03 09:15:41
オリジナル
3521 人が閲覧しました

この記事では主に、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 ? &#39;tui-nav-active&#39; : &#39;&#39;}}" 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: [&#39;今日特惠&#39;, &#39;烟灶推荐&#39;, &#39;净水饮水推荐&#39;, &#39;洗碗机推荐&#39;, &#39;电热推荐&#39;, &#39;燃热推荐&#39;, &#39;消毒柜推荐&#39;, &#39;嵌入式推荐&#39;, &#39;商用电器&#39;, &#39;活动说明&#39;],

  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 サイトの他の関連記事を参照してください。

関連ラベル:
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート