scroll-view元件bindscroll例項應用：自定義滾動條

我們知道scroll-view元件作為滑動控制元件非常好用，而有時候我們想放置一個跟隨滾動位置來跟進的滾動條，但又不想用滾動條api該怎麼辦呢？（當然是自己寫一個唄還能怎麼辦[自黑冷漠臉]）

嗯，沒錯。自己寫一個就好了啊。[厚臉皮點頭]

請看效果圖

那麼如何做呢？我是通過scroll-view元件的bindscroll事件來自定義的。讓我們先看看文件：

請小夥伴們看看，滾動時會觸發bindscroll事件，觸發時會生成scrollLeft、scrollTop等的資料；好，那讓我們console一下看看。


沒滾動時：

可以看到scrollLeft的值為0


滾動到最右邊時：

scorllLeft的值變為222.6多了


這就說明滾動的總長度範圍是0~222.6，那麼，我們可以根據滾動範圍來制定一個比例，動態的設定紅線滾動條的水平距離。

貼上程式碼

wxml

//紅線進度條的wxml，動態設定其left值
<view class="scroll-line">
    <view class="scrollMove" style="left:{{viewleft}}rpx"></view>
 </view>
複製程式碼

js

//滾動觸發函式scrollMove
scrollMove: function(e) {
    //獲取滾動距離
    var left = e.detail.scrollLeft;
    //將滾動距離（位移）動態添給滾動條的left
    this.setData({
        viewleft: left
    })
}
複製程式碼

也是很簡易的一個小方法，歡迎各位提建議噢~


附：我的github地址

謝謝各位小夥伴~