關(guān)于better-scroll插件的無(wú)法滑動(dòng)bug(2021通過(guò)插件解決)
better-scroll滾動(dòng)原理
wrapper作為父容器，它的高度會(huì)隨著內(nèi)容的大小而撐高。那么，當(dāng)
content的高度不超過(guò)父容器的高度，是不能滾動(dòng)的，而它一旦超過(guò)了父容器的高度，我們就可以滾動(dòng)內(nèi)容區(qū)了
BetterScroll 默認(rèn)處理容器（wrapper）的第一個(gè)子元素（content）的滾動(dòng)，其它的元素都會(huì)被忽略
所以也給定了如下頁(yè)面結(jié)構(gòu)
<div class="wrapper"> <ul class="content"> <li>...</li> <li>...</li> ... </ul> <!-- 這里可以放一些其它的 DOM，但不會(huì)影響滾動(dòng) --> </div>
所以我們?cè)谶@里只說(shuō)最重要的一點(diǎn)?。。?/strong>
因?yàn)?code>圖片需要加載，所以better-scroll的初始化時(shí)機(jī)非常重要，因?yàn)樗诔跏蓟臅r(shí)候，會(huì)計(jì)算父元素和子元素的高度和寬度，如果圖片還沒(méi)有加載完成就已經(jīng)開(kāi)始初始化，那么計(jì)算出的實(shí)際高度和你的真實(shí)高度就會(huì)有大量偏差（網(wǎng)速也會(huì)影響。。。）
這是目前所有使用者會(huì)出現(xiàn)無(wú)法滾動(dòng)的最大原因
我前幾天遇到這個(gè)問(wèn)題，并且better-scroll文檔無(wú)法訪問(wèn)，github上的文檔只有大概使用，找解決方法找了整整一天，網(wǎng)上的各種方法層出不窮，最優(yōu)解：
通過(guò)插件：better-scroll/observe-dom
動(dòng)態(tài)計(jì)算 BetterScroll 的可滾動(dòng)高度或者寬度，你并不需要自己在高度或者寬度發(fā)生變化的時(shí)候，手動(dòng)調(diào)用 refresh() 方法。插件通過(guò) MutationObserver 幫你完成了。
如果當(dāng)前你的瀏覽器不支持 MutationObserver，會(huì)降級(jí)使用 setTimeout。
使用
安裝依賴 npm install @better-scroll/observe-dom
import BScroll from '@better-scroll/core'
import ObserveDom from '@better-scroll/observe-dom'
BScroll.use(ObserveDom)
const bs = new BScroll('.wrapper', {
observeDOM: true
})
這個(gè)問(wèn)題還有很多解決辦法，但網(wǎng)上很多文章講也沒(méi)有講清，使用這個(gè)插件就好了
別的解決辦法大概思路就是：監(jiān)聽(tīng)圖片加載調(diào)用refresh()重新計(jì)算高度
vue用img標(biāo)簽，用
@load="定義一個(gè)方法"監(jiān)聽(tīng)圖片加載事件，只要圖片加載一個(gè)就會(huì)調(diào)用一次你定義的方法最后在方法中寫(xiě)入this.scroll.refresh()就可以做到加載一個(gè)圖片刷新一次重新計(jì)算高度,同時(shí)你需要使用防抖函數(shù)避免頻繁的重復(fù)調(diào)用帶來(lái)的各種問(wèn)題
到此這篇關(guān)于(2021通過(guò)插件解決)better-scroll插件的無(wú)法滑動(dòng)bug的文章就介紹到這了,更多相關(guān)better-scroll插件無(wú)法滑動(dòng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了只要1K大小，純JS腳本送你一朵3D玫瑰花，屬于你的情人節(jié)專屬玫瑰，感興趣的小伙伴們可以參考一下2016-08-08
學(xué)習(xí)js就不得不學(xué)他的數(shù)組，這篇文章是由色拉油整理下，需要學(xué)習(xí)js數(shù)組的朋友可以參考下2013-10-10
頁(yè)面跳轉(zhuǎn)是經(jīng)常需要用到的，本文主要介紹了淺談uniapp頁(yè)面跳轉(zhuǎn)的解決方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
原生js實(shí)現(xiàn)ajax方法(超簡(jiǎn)單)
下面小編就為大家?guī)?lái)一篇原生js實(shí)現(xiàn)ajax方法(超簡(jiǎn)單)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09
網(wǎng)上應(yīng)用的一個(gè)不錯(cuò)common.js腳本
網(wǎng)上應(yīng)用的一個(gè)不錯(cuò)common.js腳本...2007-08-08
簡(jiǎn)單實(shí)用的HTML到UBB轉(zhuǎn)換腳本工具實(shí)現(xiàn)說(shuō)明
你也許是位樂(lè)于分享的技術(shù)人員，盡管你算不上什么技術(shù)高手，但是你都希望把自己所知道的通過(guò)博客與網(wǎng)友分享。為了讓更多人知道你的經(jīng)驗(yàn)，你可能會(huì)努力把博文發(fā)布到專業(yè)論壇。2009-11-11
我喜歡引用這句話，“程序是對(duì)復(fù)雜性的管理”。計(jì)算機(jī)世界是一個(gè)巨大的抽象建筑群。我們簡(jiǎn)單的包裝一些東西然后發(fā)布新工具，周而復(fù)始。現(xiàn)在思考下，你所使用的語(yǔ)言包括的一些內(nèi)建的抽象函數(shù)或是低級(jí)操作符。這在JavaScript里是一樣的2014-03-03
使用JS監(jiān)聽(tīng)鍵盤(pán)按下事件（keydown event）
這篇文章主要介紹了使用JS監(jiān)聽(tīng)鍵盤(pán)按下事件（keydown event），本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-11-11
js實(shí)時(shí)獲取窗口大小變化的實(shí)例代碼
下面小編就為大家?guī)?lái)一篇js實(shí)時(shí)獲取窗口大小變化的實(shí)例代碼。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11
JS如何讓你的移動(dòng)端交互體驗(yàn)更加優(yōu)秀
現(xiàn)在在手機(jī)等移動(dòng)端設(shè)備訪問(wèn)的人越來(lái)越多，我們前端開(kāi)發(fā)者一直致力于將設(shè)計(jì)稿還原成頁(yè)面，供用戶訪問(wèn)。但除高度還原設(shè)計(jì)稿外，交互上的良好體驗(yàn)也是我們應(yīng)該做到的。2021-05-05