vue使用better-scroll實現下拉刷新、上拉加載

這篇文章主要爲大家詳細介紹了vue使用better-scroll實現下拉刷新、上拉加載，具有一定的參考價值，感興趣的小夥伴們可以參考一下

本文目的是爲了實現列表的下拉刷新、上拉加載，所以選擇了better-scroll這個庫。

用好這個庫，需要理解下面說明

• 必須包含兩個大的div，外層和內層div
• 外層div設置可視的大小(寬或者高)-有限制寬或高
• 內層div，包裹整個可以滾動的部分
• 內層div高度一定大於外層div的寬或高，才能滾動

1、先開始寫一個簡單demo，最基本的代碼架構

template

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

css

/*對外層div進行了高度上的限制*/
.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、進行改造升級，加上上拉刷新、下拉加載的代碼。

 mounted () {
 this.scroll = new BScroll(this.$refs.wrapper, {
 // 上拉加載
 pullUpLoad: {
 // 當上拉距離超過30px時觸發 pullingUp 事件
 threshold: -30
 },
 // 下拉刷新
 pullDownRefresh: {
 // 下拉距離超過30px觸發pullingDown事件
 threshold: 30,
 // 回彈停留在距離頂部20px的位置
 stop: 20
 }
 })
 this.scroll.on('pullingUp', () => {
 console.log('處理上拉加載操作')
 setTimeout(() => {
 // 事情做完，需要調用此方法告訴 better-scroll 數據已加載，否則上拉事件只會執行一次
 this.scroll.finishPullUp()
 }, 2000)
 })
 this.scroll.on('pullingDown', () => {
 console.log('處理下拉刷新操作')
 setTimeout(() => {
 console.log('asfsaf')
 // 事情做完，需要調用此方法告訴 better-scroll 數據已加載，否則下拉事件只會執行一次
 this.scroll.finishPullDown()
 }, 2000)
 })
 }

原理已經講清楚了，上面的代碼是一個功能示例，碼友結合自己項目擴展就行啦。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持神馬文庫。