scroll-view組件bindscroll實例應(yīng)用：自定義滾動條

BenCHou 發(fā)布于2019-08-22 17:59 / 2780人閱讀

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

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

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

請看效果圖

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

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

沒滾動時：

可以看到scrollLeft的值為0

滾動到最右邊時：

scorllLeft的值變?yōu)?22.6多了

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

貼上代碼

wxml

//紅線滾動條的wxml，動態(tài)設(shè)置其left值

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

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

附：我的github地址

謝謝各位小伙伴~

云服務(wù)器 GPU云服務(wù)器自定義html滾動條自定義選擇組件自定義進(jìn)度條自定義滾動庫

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/95380.html

相關(guān)文章

scroll-view組件bindscroll實例應(yīng)用：自定義滾動條

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

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

摘要：導(dǎo)航欄導(dǎo)航欄用的組件，設(shè)置其水平方向滑動，點擊到的字體會變換樣式。而且，導(dǎo)航欄點擊不同的類別會將主頁替換成不同的結(jié)構(gòu)，這就要將最開始的主頁結(jié)構(gòu)隱藏起來。前言購物節(jié)又要來啦?。。ㄈ龌ㄈ龌ǎ。┝闶炒蛘劾玻。∫路蛘哿耍?！小伙伴們準(zhǔn)備好買買買了嗎?。?！讓我看看我還多少余額哈?。M心期待(*￣︶￣)）（10秒后......）好吧我還是寫個電商小程序過過癮好了。[冷漠臉]咳咳，讓我們進(jìn)入正題...

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

摘要：導(dǎo)航欄導(dǎo)航欄用的組件，設(shè)置其水平方向滑動，點擊到的字體會變換樣式。而且，導(dǎo)航欄點擊不同的類別會將主頁替換成不同的結(jié)構(gòu)，這就要將最開始的主頁結(jié)構(gòu)隱藏起來。前言購物節(jié)又要來啦！?。ㄈ龌ㄈ龌ǎ。┝闶炒蛘劾玻?！衣服打折了??！小伙伴們準(zhǔn)備好買買買了嗎?。?！讓我看看我還多少余額哈?。M心期待(*￣︶￣)）（10秒后......）好吧我還是寫個電商小程序過過癮好了。[冷漠臉]咳咳，讓我們進(jìn)入正題...

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

摘要：導(dǎo)航欄導(dǎo)航欄用的組件，設(shè)置其水平方向滑動，點擊到的字體會變換樣式。而且，導(dǎo)航欄點擊不同的類別會將主頁替換成不同的結(jié)構(gòu)，這就要將最開始的主頁結(jié)構(gòu)隱藏起來。前言購物節(jié)又要來啦?。。ㄈ龌ㄈ龌ǎ。┝闶炒蛘劾玻。∫路蛘哿耍。⌒』锇閭儨?zhǔn)備好買買買了嗎?。?！讓我看看我還多少余額哈！（滿心期待(*￣︶￣)）（10秒后......）好吧我還是寫個電商小程序過過癮好了。[冷漠臉]咳咳，讓我們進(jìn)入正題...

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

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

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