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


謝謝各位小夥伴~