vue使用vant-ui實現上拉加載、下拉刷新和返回頂部
vue現在在移動端常用的ui庫有vant-ui和mint-ui，上拉加載、下拉刷新和返回頂部也是移動端最基礎最常見的功能。下面就用vant-ui來實現在三個功能。
首先，你需要安裝好了vant，做好了相關配置 ，如果沒有，請參考vant的官方文檔 https://youzan.github.io/vant/#/zh-CN/quickstart
這里使用的自動按需加載的方式 。做好這些之后，你需要引入組件 ，自動按需加載的只是css和js。
import Vue from 'vue' //引入vue
import { Icon, List, PullRefresh } from 'vant' //引入字體圖標，列表， 下拉刷新
Vue.use(List);
Vue.use(PullRefresh);
下面的組件的使用和官方文檔中也是一樣的
<van-list
v-model="loading"
:finished="finished"
finished-text="沒有更多了"
@load="onLoad"
>
<van-pull-refresh v-model="isLoading" @refresh="onRefresh(-1)">
。。。 //列表內容，需要加載和刷新的部分
</van-pull-refresh>
<van-cell
v-for="item in list"
:key="item"
:title="item"
/>
</van-list>
export default {
data() {
return {
flag_scroll: false,
loading: false,
finished: false,
isLoading: false,
page:1,
};
},
methods: {
//上拉加載
//異步請求數據 ，我們的項目時封裝好的方法，此處只是調用
onLoad(code){
let body = {}
body.page = this.page
body.lifecycleStatus = code //傳遞的參數
this.getMaintenanceMoreList({
body,
failure: (resData) => {
},
//上面的這些都不需要理會，只要記得在數據請求成功的回調里做以下操作：
success: (resData) => {
this.loading = false; //數據請成功后
this.page++ //頁碼要增加1
if(resData.data.rows.length == 0){//如果返回數據為空，則顯示沒有數據了。。。
this.finished = true;
}
}
})
},
}
需要注意的點：
- 請求成功后
this.loading = false- 頁碼自增
this.page++- 判斷是否還有數據，如果已經全部請求出來了，
this.finished = true- 拼接數組 state.MAIMTENANCE_LIST = [... state.MAIMTENANCE_LIST, ...resData.data.rows]
因為項目中用的狀態管理器，所以數據的處理是在store里進行操作的，只需要講請求回的列表的數據進行拼接即可state.MAIMTENANCE_LIST = [... state.MAIMTENANCE_LIST, ...resData.data.rows]
下拉刷新：
onRefresh() {
this.finished = false;
this.page = 1
this.getList()//正常的請求數據的方法，數組重新賦值
},
//列表請求會在多處使用，所以放在了一個方法里
getList () {
let body = {}
body.page = this.page
this.getMaintenanceList({
body,
failure: (resData) => {
},
success: (resData) => {
this.isLoading = false;
this.page++
}
})
}
注意事項：
- this.finished = false; 上拉加載完數據之后 this.finished = false，如果不設置為false，下拉刷新之后上拉加載將不會執行
- this.page = 1 上拉加載時this.page的值已經發生變化，下拉刷新之后頁面顯示的首屏的數據 ，上拉時要重新加載分頁。
- this.isLoading = false; this.isLoading = true的情況下數據請求成功但是不會繼續往下執行，為false之后才會繼續執行
- this.page++ 是為了上拉加載做准備，首屏已經加載，繼續上拉需要加載的是第二頁的內容
返回頂部是最容易實現的了，請看：
<van-button type="default" class="backTop" @click="backTop" v-show="flag_scroll">
<van-icon name="arrow-up" size="20" />
</van-button>
//在methods里定義方法
backTop(){
document.getElementsByClassName('equi_container')[0].scrollTop = 0
},
這就可以啦。。。點擊按鈕，讓滾動條高度為0.
注意：是給滾動的父元素設置，也就是設置了
overflow：auto的元素
如果不想讓按鈕在一開始的時候存在，而是在滾動了一定的距離的時候再出現，那設置 一個滾動條的監聽就搞定啦，
mounted() {
window.addEventListener('scroll', this.handleScroll, true)
},
//methods中定義事件
handleScroll(env){
let scrollTop = document.getElementsByClassName('equi_container')[0].scrollTop
if(scrollTop > 100){
this.flag_scroll = true
}else {
this.flag_scroll = false
}
},
前提是，你要在data中定義屬性flag_scroll，並設置按鈕的v-if或者v-show，建議使用v-show
注意：按鈕要設置固定定位，按鈕最好設置邊框，會好看。
寫的有點亂，望大神指點，希望能給予需要的人一點點的幫助，有不明白的歡迎留言，謝謝！