簡單說一下vue中數據分頁請求的做法

首先引入Loadmore：

import {Loadmore} from 'mint-ui';

注冊組件：

components: {'v-loadmore':Loadmore },

接下來：

<v-loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :auto-fill="false" ref="loadmore">

要在data中加入一下數據

data(){reture{loadAll:false,pageNo:0, //請求的頁數（可自定義）pageSize:20, //請求的條數（可自定義）allLoaded: false, //是否可以上拉屬性，false可以上拉，true為禁止上拉，就是不讓往上劃加載數據了} }

在執行上拉操作的時候

loadBottom() {// 上拉加載this.more();// 上拉觸發的分頁查詢this.$refs.loadmore.onBottomLoaded();// 固定方法，查詢完要調用一次，用于重新定位 },

// 這個 this.more() 是 請求后臺的接口

注：在調用 this.more() 這個方法的時候，要this.loadAll = true;并且this.pageNo = parseInt(this.pageNo) + 1;
每次下拉操作的時候請求的頁數+1

初始化的時候要默認顯示20條

mounted(){this.more() }

總結

以上是生活随笔為你收集整理的vue 分页请求的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。