scroll-view組件bindscroll實例應用：自定義滾動條

BenCHou 發布于2019-08-22 17:59 / 2758人閱讀

摘要：我們知道組件作為滑動控件非常好用，而有時候我們想放置一個跟隨滾動位置來跟進的滾動條，但又不想用滾動條該怎么辦呢當然是自己寫一個唄還能怎么辦自黑冷漠臉嗯，沒錯。厚臉皮點頭請看效果圖那么如何做呢我是通過組件的事件來自定義的。

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

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

請看效果圖

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

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

沒滾動時：

可以看到scrollLeft的值為0

滾動到最右邊時：

scorllLeft的值變為222.6多了

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

貼上代碼

wxml

//紅線滾動條的wxml，動態設置其left值

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

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

附：我的github地址

謝謝各位小伙伴~

GPU云服務器云服務器自定義html滾動條自定義選擇組件自定義進度條自定義滾動庫

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95380.html

scroll-view組件bindscroll實例應用：自定義滾動條

摘要：我們知道組件作為滑動控件非常好用，而有時候我們想放置一個跟隨滾動位置來跟進的滾動條，但又不想用滾動條該怎么辦呢當然是自己寫一個唄還能怎么辦自黑冷漠臉嗯，沒錯。厚臉皮點頭請看效果圖那么如何做呢我是通過組件的事件來自定義的。我們知道scroll-view組件作為滑動控件非常好用，而有時候我們想放置一個跟隨滾動位置來跟進的滾動條，但又不想用滾動條api該怎么辦呢？（當然是自己寫一個唄還能怎...

LucasTwilight 2019-08-02 10:42 評論0 收藏0
618購物節來襲，電商陪你浪浪浪

摘要：導航欄導航欄用的組件，設置其水平方向滑動，點擊到的字體會變換樣式。而且，導航欄點擊不同的類別會將主頁替換成不同的結構，這就要將最開始的主頁結構隱藏起來。前言購物節又要來啦！！（撒花撒花！）零食打折啦！！衣服打折了！！小伙伴們準備好買買買了嗎！！！讓我看看我還多少余額哈！（滿心期待(*￣︶￣)）（10秒后......）好吧我還是寫個電商小程序過過癮好了。[冷漠臉]咳咳，讓我們進入正題...

selfimpr 2019-08-29 15:42 評論0 收藏0
618購物節來襲，電商陪你浪浪浪

摘要：導航欄導航欄用的組件，設置其水平方向滑動，點擊到的字體會變換樣式。而且，導航欄點擊不同的類別會將主頁替換成不同的結構，這就要將最開始的主頁結構隱藏起來。前言購物節又要來啦！！（撒花撒花！）零食打折啦！！衣服打折了！！小伙伴們準備好買買買了嗎！！！讓我看看我還多少余額哈！（滿心期待(*￣︶￣)）（10秒后......）好吧我還是寫個電商小程序過過癮好了。[冷漠臉]咳咳，讓我們進入正題...

hellowoody 2019-08-22 18:00 評論0 收藏0
618購物節來襲，電商陪你浪浪浪

摘要：導航欄導航欄用的組件，設置其水平方向滑動，點擊到的字體會變換樣式。而且，導航欄點擊不同的類別會將主頁替換成不同的結構，這就要將最開始的主頁結構隱藏起來。前言購物節又要來啦！！（撒花撒花！）零食打折啦！！衣服打折了！！小伙伴們準備好買買買了嗎！！！讓我看看我還多少余額哈！（滿心期待(*￣︶￣)）（10秒后......）好吧我還是寫個電商小程序過過癮好了。[冷漠臉]咳咳，讓我們進入正題...

MarvinZhang 2019-08-02 10:41 評論0 收藏0
微信小程序開發-個人總結

微信小程序開發總結基礎的配置及視圖層、邏輯層自己看文檔 [微信小程序文檔][1] 這里只說一下自己的經驗總結提醒微信小程序不運行在瀏覽器，所以不能操作Dom，也沒有document、window對象每一個頁面路徑最多五層 eg：頁面A->頁面B->頁面C->頁面D->頁面E->（頁面F是跳轉不出來的）注：不經過redirect，redirect后的頁面算是第一層，但是沒有-返回-按鈕...

FrancisSoung 2019-08-21 11:17 評論0 收藏0