小程序中分页加载问题
Posted adyblog
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了小程序中分页加载问题相关的知识，希望对你有一定的参考价值。
别的不说，直接贴分页加载的代码，看注释就好
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: ‘没有更多数据‘,
})
}
}
})
以上是关于小程序中分页加载问题的主要内容，如果未能解决你的问题，请参考以下文章