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地址

謝謝各位小夥伴~