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

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

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

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

嗯，沒(méi)錯(cuò)。自己寫(xiě)一個(gè)就好了啊。[厚臉皮點(diǎn)頭]

請(qǐng)看效果圖

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

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

沒(méi)滾動(dòng)時(shí)：

可以看到scrollLeft的值為0

滾動(dòng)到最右邊時(shí)：

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

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

貼上代碼

wxml

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

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

也是很簡(jiǎn)易的一個(gè)小方法，歡迎各位提建議噢~

附：我的github地址

謝謝各位小伙伴~

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/95380.html

相關(guān)文章

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

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

LucasTwilight 2019-08-02 10:42 評(píng)論0 收藏0
618購(gòu)物節(jié)來(lái)襲，電商陪你浪浪浪

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

selfimpr 2019-08-29 15:42 評(píng)論0 收藏0
618購(gòu)物節(jié)來(lái)襲，電商陪你浪浪浪

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

hellowoody 2019-08-22 18:00 評(píng)論0 收藏0
618購(gòu)物節(jié)來(lái)襲，電商陪你浪浪浪

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

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

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

FrancisSoung 2019-08-21 11:17 評(píng)論0 收藏0