vue使用vant-ui實現上拉加載、下拉刷新和返回頂部

vue如今在移動端經常使用的ui庫有vant-ui和mint-ui，上拉加載、下拉刷新和返回頂部也是移動端最基礎最多見的功能。下面就用vant-ui來實如今三個功能。css

首先，你須要安裝好了vant，作好了相關配置，若是沒有，請參考vant的官方文檔 https://youzan.github.io/vant/#/zh-CN/quickstart
這裏使用的自動按需加載的方式。作好這些以後，你須要引入組件，自動按需加載的只是css和js。
vue

import Vue from 'vue' //引入vue
import { Icon, List, PullRefresh } from 'vant'    //引入字體圖標，列表， 下拉刷新

Vue.use(List);
Vue.use(PullRefresh);

下面的組件的使用和官方文檔中也是同樣的git

<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;
          }
        }
      })
    },
}

須要注意的點：github

請求成功後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++ 是爲了上拉加載作準備，首屏已經加載，繼續上拉須要加載的是第二頁的內容

返回頂部是最容易實現的了，請看：ui

<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.this

注意：是給滾動的父元素設置，也就是設置了overflow：auto的元素
若是不想讓按鈕在一開始的時候存在，而是在滾動了必定的距離的時候再出現，那設置一個滾動條的監聽就搞定啦，
spa

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

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

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