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

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

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