小程序中分页加载问题

别的不说,直接贴分页加载的代码,看注释就好

 pasting

//index.js
const app = getApp()

//分装的require 函数,http.js见本人随笔“解决小程序分装的require问题

var http = require( '../../../service/http.js');
Page({
data: {
newsBulletin: [],
page: 1,
pageSize: 8,
hasMoreData: true,
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function () {
var that = this;
if (!wx.cloud) {
wx.redirectTo({
url: '../../chooseLib/chooseLib',
})
return
}
// 页面初始化 options为页面跳转所带来的参数\

//初始化加载一次 

that.getNewsBulletin( '正在加载数据...')
},
// 新闻公告
getNewsBulletin: function () {
var that = this;
http.getReq( "/api5/News?option=hot&" + "page=" + that.data.page + "&size="+that.data.pageSize,{}, function (res) {
if (that.data.page == 1) {
var newsBulletinTem = [];
} else{
var newsBulletinTem = that.data.newsBulletin;
}
var newsBulletin = res.data;
newsBulletinTem = newsBulletinTem.concat(newsBulletin); //使用concat时一定要提前声明newsBulletinTem
//如果新加载出来的数据的长度小于需要请求的数据长度,证明数据已经下载完毕,hasMoreData设为false,否则页数加一

if (newsBulletin.length < that.data.pageSize) {

that.setData({
newsBulletin: newsBulletinTem,
hasMoreData: false
})
} else {
that.setData({
newsBulletin: newsBulletinTem,
hasMoreData: true,
page: that.data.page + 1
})
}
})
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
this.data.page = 1
this.getNewsBulletin( '正在刷新数据')
},

/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
if ( this.data.hasMoreData) {
this.getNewsBulletin( '加载更多数据')
} else {
wx.showToast({
title: '没有更多数据',
})
}
}
})

猜你喜欢

转载自www.cnblogs.com/Adyblog/p/9782526.html