vue使用vant-ui實現上拉加載、下拉刷新和返回頂部
- 2019 年 10 月 15 日
- 筆記
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
注意:按鈕要設置固定定位,按鈕最好設置邊框,會好看。
寫的有點亂,望大神指點,希望能給予需要的人一點點的幫助,有不明白的歡迎留言,謝謝!