Uni-app pulls and loads data to achieve paging

Function analysis of pull-up loading pages:

1.The user slides up the page, the scroll bar hits the bottom and starts loading the next page of data2.Determine if there is data on the next page3.If there is no data on the next page, display the prompt content4.If there is next page data, load next page dataCopy the code

Let’s start by adding the HTML code for the prompt message to the template

<view class="grace-loading" v-if="isLoadAll">{{ loadingTxt }}</view>
Copy the code

Then we define the data we want to use in data

data() {
    return {
        totalPages: 1./ / the total number of pages
        loadingTxt: 'Loading... '.isLoadAll: false.paramsData: {
            pageNum: 1.pageSize: 10,},salesOrderList: []  / / the list array}}Copy the code

Page slide, scroll bar bottom event

// Uni-app scroll to the bottom of the page, usually used to slide up to load data on the next page
onReachBottom() {
    // Determine whether the current page is greater than or equal to the total number of pages
    if (this.totalPages <= this.paramsData.pageNum) {
        this.isLoadAll = true;
	this.loadingTxt = 'No more data.';
    } else {
	this.paramsData.pageNum++;
	this.isLoadAll = true;
	this.loadingTxt = 'Loading... ';
	this.querySalesCollectionDetails();   // Each slide requests the interface, to achieve the pull up load more data}},Copy the code

Slide up splicing data

methods:{
    querySalesCollectionDetails: function() {
	querySalesCollectionDetails(this.paramsData).then((res={}) = > {
            this.totalPages = res.totalPages;
            this.salesOrderList = [...this.salesOrderList, ...res.list]; }}})Copy the code

If there are any mistakes or deficiencies, please correct them in the comments section, AND I will correct them in time!