zoukankan      html  css  js  c++  java
  • 小程序中分页加载问题

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

     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: '没有更多数据',
    })
    }
    }
    })
  • 相关阅读:
    Hybrid APP基础篇(四)->JSBridge的原理
    剑指offer
    剑指offer
    如何在HTML中设置文本的大小写
    如何给HTML标签中的文本设置修饰线
    CSS设置文本的水平对齐方向
    如何在HTML中设置字体颜色,你知道这几种方式吗?
    CSS尺寸样式属性
    CSS基本选择器是什么?基本选择器是如何工作
    如何创建 CSS
  • 原文地址:https://www.cnblogs.com/Adyblog/p/9782526.html
Copyright © 2011-2022 走看看