因?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)文章希望大家以后多多支持腳本之家！