自然にマイクロチャネルスライドナビゲーションアプレット、スライド位置

レンダリング

 

 

CSS

.swiper-NAV { ">＃FFF;空白：NOWRAP}

.swiper-NAV .item-NAV {位置：相対;パディング：30rpx 32rpx;色：＃666666;フォントサイズ：30rpx;カーソル：ポインタ;表示：インラインブロック; -webkit-タップハイライト色：RGBA（ 0,0,0,0）;}

.swiper-NAV .active {色：＃666666}

 

 

HTML

<スクロールビュースクロール-Xクラス= 'swiper-NAV' スクロール左= '{{swiperNav.x}}' スクロールとアニメーション= '真' bindtap = 'swiperNav'>

　<ビューWXのための：= '{{swiperNav.arr}}' データID = "{{item.id}}" WX：キー= '{{索引}}' クラス= 'アイテム-NAV {{swiperNav.i ==インデックス？"アクティブ"： ""}}」データI = {{索引}} '> {{}} item.name

<ビューデータI = {{索引}} 'クラス=' {{swiperNav.i ==インデックス？"biankuang"： ""}} '> </ビュー>

</ビュー>

</スクロールビュー>

 

JS

データ{　　

swiperNav：{

　　I：0、

　　ARR：[

　　　{V：0、TXT： "推荐"}、

　　　{V：1、TXT： "浪漫"}、

　　　{V：2、TXT： "逗趣"}、

　　　{V：3、TXT： "鎮静"}、

　　　{V：4、TXT： "愉悦"}、

　　　{V：5、TXT： "新年"}、

　　]

　}

}

 

swiperNav：関数（E）{

　console.log（E）;

　this.setData（{

　　'swiperNav.i'：e.target.dataset.i

　}）

}、

 

swiperNav：関数（E）{

　console.log（E）;

　/ * *可視ウィンドウの幅を取得/

　。= wx.getSystemInfoSync（）windowWidth W VAR。

　VAR LENG = this.data.swiperNav.arr.length。

　VAR I = e.target.dataset.i。

VAR TYPE_ID = e.target.dataset.id

　VAR DISX =（I - 1）* W / LENG。

　もし（私！= this.data.swiperNav.i）{

　　this.setData（{

　　　'swiperNav.i'：I

　　}）

　}

　this.setData（{

　　'swiperNav.x'：DISX、

TYPE_ID：TYPE_ID

　}）

this.list（）

}、