簡(jiǎn)單說(shuō)一下vue中數(shù)據(jù)分頁(yè)請(qǐng)求的做法

首先引入Loadmore：

import {Loadmore} from 'mint-ui';

注冊(cè)組件：

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

接下來(lái)：

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

要在data中加入一下數(shù)據(jù)

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

在執(zhí)行上拉操作的時(shí)候

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

// 這個(gè) this.more() 是 請(qǐng)求后臺(tái)的接口

注：在調(diào)用 this.more() 這個(gè)方法的時(shí)候，要this.loadAll = true;并且this.pageNo = parseInt(this.pageNo) + 1;
每次下拉操作的時(shí)候請(qǐng)求的頁(yè)數(shù)+1

初始化的時(shí)候要默認(rèn)顯示20條

mounted(){this.more() }

總結(jié)

以上是生活随笔為你收集整理的vue 分页请求的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。