怎么在vue中使用better-scroll實現(xiàn)一個下拉刷新、上拉加載功能
怎么在vue中使用better-scroll實現(xiàn)一個下拉刷新、上拉加載功能？針對這個問題，這篇文章詳細(xì)介紹了相對應(yīng)的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。
目前創(chuàng)新互聯(lián)建站已為成百上千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)站空間、網(wǎng)站托管維護(hù)、企業(yè)網(wǎng)站設(shè)計、象山網(wǎng)站維護(hù)等服務(wù)，公司將堅持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。
1、先開始寫一個簡單demo，最基本的代碼架構(gòu)
template
...
...
css
/*對外層div進(jìn)行了高度上的限制*/
.wrapper {
display: fixed;
left: 0;
top: 0;
bottom: 0;
width: 100%;
height:300px;
overflow:hidden;
}
.content {
width:100%;
height:800px;
background:blue;
}script
import BScroll from 'better-scroll'
this.scroll = new BScroll(new BScroll(this.$refs.wrapper))
2、進(jìn)行改造升級，加上上拉刷新、下拉加載的代碼。
mounted () {
this.scroll = new BScroll(this.$refs.wrapper, {
// 上拉加載
pullUpLoad: {
// 當(dāng)上拉距離超過30px時觸發(fā) pullingUp 事件
threshold: -30
},
// 下拉刷新
pullDownRefresh: {
// 下拉距離超過30px觸發(fā)pullingDown事件
threshold: 30,
// 回彈停留在距離頂部20px的位置
stop: 20
}
})
this.scroll.on('pullingUp', () => {
console.log('處理上拉加載操作')
setTimeout(() => {
// 事情做完，需要調(diào)用此方法告訴 better-scroll 數(shù)據(jù)已加載，否則上拉事件只會執(zhí)行一次
this.scroll.finishPullUp()
}, 2000)
})
this.scroll.on('pullingDown', () => {
console.log('處理下拉刷新操作')
setTimeout(() => {
console.log('asfsaf')
// 事情做完，需要調(diào)用此方法告訴 better-scroll 數(shù)據(jù)已加載，否則下拉事件只會執(zhí)行一次
this.scroll.finishPullDown()
}, 2000)
})
}關(guān)于怎么在vue中使用better-scroll實現(xiàn)一個下拉刷新、上拉加載功能問題的解答就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識。
網(wǎng)站欄目：怎么在vue中使用better-scroll實現(xiàn)一個下拉刷新、上拉加載功能
當(dāng)前路徑：
http://weahome.cn/article/gijeeh.html
重慶分公司
重慶分公司
