vue使用better-scroll實(shí)現(xiàn)下拉刷新、上拉加載
更新時間：2021年09月26日 14:48:08 作者：曹天驕
這篇文章主要為大家詳細(xì)介紹了vue使用better-scroll實(shí)現(xiàn)下拉刷新、上拉加載，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文目的是為了實(shí)現(xiàn)列表的下拉刷新、上拉加載，所以選擇了better-scroll這個庫。
用好這個庫，需要理解下面說明
- 必須包含兩個大的div，外層和內(nèi)層div
- 外層div設(shè)置可視的大小(寬或者高)-有限制寬或高
- 內(nèi)層div，包裹整個可以滾動的部分
- 內(nèi)層div高度一定大于外層div的寬或高，才能滾動
1、先開始寫一個簡單demo，最基本的代碼架構(gòu)
template
<div ref="wrapper" class="wrapper"> <ul class="content"> <li>...</li> <li>...</li> </ul> </div>
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)
})
}
原理已經(jīng)講清楚了，上面的代碼是一個功能示例，碼友結(jié)合自己項(xiàng)目擴(kuò)展就行啦。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
這篇文章主要介紹了基于mpvue的簡單彈窗組件mptoast使用詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-08-08
這篇文章主要介紹了vue移動端自適應(yīng)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
Vue 基礎(chǔ)語法之計算屬性(computed)、偵聽器(watch)、過濾器(filters)詳解
計算屬性就是 Vue 實(shí)例選項(xiàng)中的 computed，computed 的值是一個對象類型，對象中的屬性值為函數(shù)，而且這個函數(shù)沒辦法接收參數(shù)，這篇文章主要介紹了Vue 基礎(chǔ)語法之計算屬性(computed)、偵聽器(watch)、過濾器(filters)詳解,需要的朋友可以參考下2022-11-11
Vue實(shí)現(xiàn)按鈕旋轉(zhuǎn)和移動位置的實(shí)例代碼
這篇文章主要介紹了Vue實(shí)現(xiàn)按鈕旋轉(zhuǎn)和移動位置的實(shí)例代碼，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-08-08
關(guān)于前端報“應(yīng)為聲明或語句。ts(1128)“的原因及解決方案
最近在學(xué)習(xí)中遇到了個不常見的報錯,這里給大家總結(jié)下解決的辦法,這篇文章主要給大家介紹了關(guān)于前端報“應(yīng)為聲明或語句,ts(1128)“的原因及解決方案,需要的朋友可以參考下2024-08-08
Vue的生命周期就是vue實(shí)例從創(chuàng)建到銷毀的全過程,也就是new Vue() 開始就是vue生命周期的開始。Vue 實(shí)例有?個完整的?命周期,也就是從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模版、掛載Dom -> 渲染、更新 -> 渲染、卸載 等?系列過程,稱這是Vue的?命周期2022-11-11
這篇文章主要為大家詳細(xì)介紹了VUE項(xiàng)目中封裝Echart折線圖的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了一個Vue的內(nèi)存泄露詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2021-10-10
今天小編就為大家分享一篇vue 解決路由只變化參數(shù)頁面組件不更新問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue-cli3.0+element-ui上傳組件el-upload的使用
這篇文章主要介紹了vue-cli3.0+element-ui上傳組件el-upload的使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12