怎么在vue中使用better-scroll實(shí)現(xiàn)一個(gè)下拉刷新、上拉加載功能

怎么在vue中使用better-scroll實(shí)現(xiàn)一個(gè)下拉刷新、上拉加載功能？針對(duì)這個(gè)問題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡(jiǎn)單易行的方法。

1、先開始寫一個(gè)簡(jiǎn)單demo，最基本的代碼架構(gòu)

template

<div ref="wrapper" class="wrapper">
 <ul class="content">
 <li>...</li>
 <li>...</li>
 </ul>
</div>

css

/*對(duì)外層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)行改造升級(jí)，加上上拉刷新、下拉加載的代碼。

 mounted () {
 this.scroll = new BScroll(this.$refs.wrapper, {
 // 上拉加載
 pullUpLoad: {
 // 當(dāng)上拉距離超過30px時(shí)觸發(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ù)已加載，否則上拉事件只會(huì)執(zhí)行一次
 this.scroll.finishPullUp()
 }, 2000)
 })
 this.scroll.on('pullingDown', () => {
 console.log('處理下拉刷新操作')
 setTimeout(() => {
 console.log('asfsaf')
 // 事情做完，需要調(diào)用此方法告訴 better-scroll 數(shù)據(jù)已加載，否則下拉事件只會(huì)執(zhí)行一次
 this.scroll.finishPullDown()
 }, 2000)
 })
 }

關(guān)于怎么在vue中使用better-scroll實(shí)現(xiàn)一個(gè)下拉刷新、上拉加載功能問題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識(shí)。