微信小程式：scroll-view製作橫向滾動導航條特效

阿新 • • 發佈：2021-01-22

微信小程式：scroll-view製作橫向滾動導航條特效

一、scroll-view介紹

微信小程式官方釋義為：可滾動檢視區域，目前一共有10幾個屬性，包括：scroll-x、scroll-y、scroll-top等。詳細介紹見官方文件：
developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html。下面來說下如何使用scroll-view做一個可橫向滾動的導航條吧。效果如圖：

在這裡插入圖片描述

二、scroll-x實現橫向滾動
先來看下wxml頁面的程式碼。

wxml程式碼

<scroll-view 
 scroll-x class='swiper-nav' scroll-left='{{swiperNav.x}}' scroll-with-animation='true' bindtap='swiperNav'>
　<text wx:for='{{swiperNav.arr}}' wx:key='{{index}}' class='item-nav {{swiperNav.i==index ? "active" : ""}}' data-i='{{index}}'>{{item.txt}}</text>
</scroll-view 
>

此時儲存後模擬器中並不會顯示任何結果，因為資料在js中。

2.2、js程式碼

data: {
　swiperNav:{
　　i:0,
　　arr:[
　　　{ v: 0, txt: "推薦專區" },
　　　{ v: 1, txt: "進口商品" },
　　　{ v: 2, txt: "飲料衝調" },
　　　{ v: 3, txt: "休閒零食" },
　　　{ v: 4, txt: "生鮮" },
　　　{ v: 5, txt: "速食調味" }
　　]
　}
}

此時我們再儲存後頁面中就有效果了。如圖：

在這裡插入圖片描述

現在沒有任wxss樣式雖然現在頁面比較挫，主要是因為我們還沒有寫wxss。

2.3、wxss程式碼

/*橫向導航*/
.swiper-nav{background-color: #fff;}
.swiper-nav .item-nav{position: relative;padding: 30rpx 32rpx;color: #999;font-size: 30rpx;cursor: pointer;display: inline-block}
.swiper-nav .active{color: #f43838}
.swiper-nav .active::after{content:'';position: absolute;left: 32rpx;right: 32rpx;height:0;border-bottom: 4rpx solid #f43838;border-radius: 4rpx;bottom: 18rpx}

現在再來看下頁面，是不是有點感覺了？如圖：現在導航顯示成兩行

在這裡插入圖片描述

顯然，此時仍然是有問題的。因為此時我們的導航是兩行顯示，而預期效果應該是一行顯示才對。那要怎麼辦呢？

2.4、white-space: nowrap登場
你說這個微信小程式也真是的哈，既然都提供了scroll-x了並說這個可以橫向滾動，那你幹嘛不一步到位呢？何必還要讓我們再多寫一個css屬性white-space: nowrap？

當我們把white-space: nowrap新增到.swiper-nav中後再儲存就可以看到預期效果了。如圖：新增white-space-nowrap屬性後的效果圖

在這裡插入圖片描述

但是此時點選時並沒有任何效果，啟用狀態也不會發生變化，因為啟用狀態需要再寫js。

2.5、bindtap事件
js該怎麼寫呢？不妨先分析下動態啟用狀態的功能。在前面的wxml頁面中，我們用swiperNav.i和index來判斷是否需要啟用，然後為了可以獲取當前點選元素的index，用了一個data-i來接收索引。所以此時我們在點選後動態的改變swiperNav.i就可以了。

2.6、點選事件swiperNav的js程式碼

swiperNav:function(e){
　console.log(e);
　this.setData({
　　'swiperNav.i':e.target.dataset.i
　})
},

此時儲存後再點選就有效果了，如圖：

在這裡插入圖片描述

怎麼樣，6不6？！

但是，細心的看官應該會看到一個問題：點選的時候，有一個背景是什麼鬼？！

2.7、-webkit-tap-highlight-color去點選元素時的背景
其實這個問題在移動端頁面上也有體現，而做法就是：

-webkit-tap-highlight-color:rgba(0,0,0,0);

所以此時我們把這段程式碼放到咱們的wxss中即可。然後再儲存，此時再點選時就沒有那個背景了。如圖：

在這裡插入圖片描述

怎麼樣，6吧！

那這樣就完事了？

當然沒有！別忘了，咱們導航可是有6個分類的，現在只顯示了4個，剩下兩個可無法點出來的哦！

三、scroll-left設定橫向滾動條位置
其實在上面的程式碼中，藝靈已經寫過了scroll-left=’{{swiperNav.x}}’，只不過在js中沒有寫相就的事件。

我們先要在data中新增一個x的資料，初始值為0。然後再來寫如何計算這個x的值。

3.1、動態計算scroll-left位置的js程式碼

swiperNav:function(e){
　console.log(e);
　/*獲取可視視窗寬度*/
　var w=wx.getSystemInfoSync().windowWidth;
　var leng=this.data.swiperNav.arr.length;
　var i = e.target.dataset.i;
　var disX = (i - 2) * w / leng;
　if(i!=this.data.swiperNav.i){
　　this.setData({
　　　'swiperNav.i':i
　　})
　}
　this.setData({
　　'swiperNav.x':disX
　})
},

儲存後，再點選第3個後面的選單時就會自動向左滾動一段距離，然後顯示下一個選單。如圖：可橫向滾動的導航特效終極效果可橫向滾動的導航特效終極效果

在這裡插入圖片描述

至此，一個微信小程式中可橫向滾動的導航特效就說完了。至於點選時，下面的內容切換，有多種方法，看官自己動手吧。

感謝藝靈http://www.yilingsj.com/xwzj/2018-11-25/weixin-miniprogram-scroll-view.html

微信小程式：scroll-view製作橫向滾動導航條特效