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

注意：按鈕要設置固定定位，按鈕最好設置邊框，會好看。

寫的有點亂，望大神指點，希望能給予需要的人一點點的幫助，有不明白的歡迎留言，謝謝！