我們知道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;//將滾動距離（位移）動態添給滾動條的leftthis.setData({viewleft: left}) }

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


附：我的github地址

謝謝各位小伙伴~

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的scroll-view组件bindscroll实例应用：自定义滚动条的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。