1. 程式人生 > >小程序中分頁加載問題

小程序中分頁加載問題

ref 跳轉 amp lse NPU 帶來 16px length style

別的不說,直接貼分頁加載的代碼,看註釋就好

pasting

//index.jsconst 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: ‘沒有更多數據‘, }) } }})

小程序中分頁加載問題