官方文檔是這樣解釋的:
refresh()
參數(shù):無(wú)
返回值:無(wú)
作用:重新計(jì)算 better-scroll扩所,當(dāng) DOM 結(jié)構(gòu)發(fā)生變化的時(shí)候務(wù)必要調(diào)用確保滾動(dòng)的效果正常塌鸯。
我的理解是浪册,這個(gè)方法的使用場(chǎng)景大概分為以下幾種
1.DOM樹結(jié)構(gòu)改變時(shí)
2.需要展示的內(nèi)容大于scrollerHeight和wrapperHeight時(shí)
3.圖片列表等展示形式中 圖片加載完成時(shí)
this.scroll.refresh()
對(duì)于refresh非常頻發(fā)的問題江醇,進(jìn)行防抖操作
·防抖debounce/節(jié)流throttle
·防抖函數(shù)的起作用的過程
1.可以將refresh函數(shù)傳入到的debounce函數(shù)中 生成一個(gè)新的函數(shù)
2.之后再調(diào)用非常頻繁的時(shí)候恩尾,使用新生成的函數(shù)
3.而新生成的函數(shù)烁峭,并不會(huì)非常頻繁的調(diào)用囱稽,如果下一次執(zhí)行來的非辰汲ⅲ快,那么會(huì)將上一次的取消掉
<script>
mounted(){
this.$bus.$on('itemImageLoad',()=>{
const refresh=this.debounce(this.$refs.scroll.refresh,500)
refresh()
})
},
methods: {
//定義防止刷新頻繁的防抖函數(shù)战惊,可優(yōu)化性能
debounce(func,delay){
let timer = null
return function(...args){
if(timer) clearTimeout(timer)
timer=setTimeout(()=>{
func.apply(this,...args)
},delay)
}
},
}
</script>