Home > WeChat Applet > Mini Program Development > Mini program example: Implementation code for paging data loading in mini program

Mini program example: Implementation code for paging data loading in mini program

不言
Release: 2018-08-21 17:23:25
Original
5063 people have browsed it

This article brings you an example of a mini program: the implementation code of paging data loading in a mini program has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

// pages/billlist/index.js
const app = getApp();
Page({  
/*页面的初始数据*/
  data: {
      page: 1,    
      loading: false,    
      loadtxt: '正在加载...',    
      list: []
  },  
  /*生命周期函数--监听页面加载*/
  onLoad: function (options) {    
  this.setData({      
  option: options
    })    
    this.getlist();
  },  
  getlist: function () {
    app.fetch.newData.result({ API_URL: app.globalData.api + 'getGoldFlowList.do?ipage=' + this.data.page + '&ipagesize=15'}).then(({ data }) => {      
    if (data.object && data.object.list && data.object.list.length) {        
    let list = data.object.list;        
    for (let i = 0; i < list.length; i++) {
          list[i].c_create_datetime = app.util.formatDate(new Date(list[i].c_create_datetime));
        }        
        this.setData({
          list: this.data.list.concat(list)
        })        
        if (this.data.page == data.iTotalPage) {          
        this.setData({
            loading: true,
            loadtxt: &#39;无更多内容&#39;
          })
        } else {          
        this.setData({
            loading: false,
            loadtxt: &#39;正在加载...&#39;
          })
        }
      } else if (this.data.list.length) {        
      this.setData({
          loading: true,
          loadtxt: &#39;无更多内容&#39;
        })
      } else {        
      this.setData({
          loading: true,
          loadtxt: &#39;暂无数据&#39;
        })
      }
    }).catch(e => {      
    this.setData({
        loading: false,
        loadtxt: &#39;数据加载异常&#39;
      })
    })
  },
  /*页面上拉触底事件的处理函数*/  
  onReachBottom: function () {    
  if (!this.data.loading) {      
  this.setData({
        loading: true,
        page: this.data.page + 1
      })
      this.getlist()
    }
  }
})
Copy after login

Related recommendations:

Mini program example: Implementation code for mini program customer service to send picture information

Authorized photo album in mini program Solution (with code)

The above is the detailed content of Mini program example: Implementation code for paging data loading in mini program. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template