小程序分页加载

最新推荐文章于 2025-01-26 22:40:24 发布

gdjlc

最新推荐文章于 2025-01-26 22:40:24 发布

阅读量1.1k

点赞数

分类专栏：小程序

本文链接：https://blog.youkuaiyun.com/gdjlc/article/details/87182158

版权

小程序专栏收录该内容

3 篇文章

订阅专栏

本文介绍了在小程序中实现分页加载的步骤，包括在app.json启用enablePullDownRefresh，编写.wxml页面，调用后台接口获取数据，以及展示页面效果。示例使用了一个公开的诗词接口，展示了分页加载的实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、app.json启用enablePullDownRefresh

在window配置项里面添加"enablePullDownRefresh": true

2、页面.wxml

<view class='panel base-padding base-margin-bottom cate-data'>
  <view class='panel-heading'>
    <view class='panel-title font-lv1 strong'>唐诗     
    </view>
  </view>
  <view class='panel-body'>  
    <block wx:for="{{contentlist}}">
      <view class='row'> 
          <navigator url='/pages/intro/intro' class='ellipsis-1row font-lv2'>{{item.title}}</navigator>      
          <view class='text-muted info'>{{item.authors}}</view>  
          <view class='text-muted ellipsis-2row desc'>{{item.content}}
          </view>        
      </view>
    </block>
  </view>
</view>

3、后台方法返回

由于是测试，找了网上一个免费https接口：https://api.apiopen.top/getTangPoetry?page=1&;count=5

返回如下：
{"code":200,"message":"成功!","result":[{"title":"帝京篇十首一","content":"秦川雄帝宅，函谷壮皇居。|绮殿千寻起，离宫百雉余。|连甍遥接汉，飞观迥凌虚。|云日隐层阙，风烟出绮疏。","authors":"太宗皇帝"},{"title":"帝京篇十首二","content":"岩廊罢机务，崇文聊驻辇。|玉匣启龙图，金绳披凤篆。|韦编断仍续，缥帙舒还卷。|对此乃淹留，欹案观坟典。","authors":"太宗皇帝"},{"title":"帝京篇十首三","content":"移步出词林，停舆欣武宴。|雕弓写明月，骏马疑流电。|惊雁落虚弦，啼猿悲急箭。|阅赏诚多美，于兹乃忘倦。","authors":"太宗皇帝"},{"title":"帝京篇十首四","content":"鸣笳临乐馆，眺听欢芳节。|急管韵朱弦，清歌凝白雪。|彩凤肃来仪，玄鹤纷成列。|去兹郑卫声，雅音方可悦。","authors":"太宗皇帝"},{"title":"帝京篇十首五","content":"芳辰追逸趣，禁苑信多奇。|桥形通汉上，峰势接云危。|烟霞交隐映，花鸟自参差。|何如肆辙迹？万里赏瑶池。","authors":"太宗皇帝"}]}

4、页面.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    page: 1,
    pageSize: 5,
    hasMoreData: true,
    contentlist: []
  },

  getInfo: function () {
    var that = this;
    wx.request({
      url: 'https://api.apiopen.top/getTangPoetry',
      data: { page: that.data.page, count: that.data.pageSize },
      success: function (res) {
        console.log(res);// 服务器回包信息
        var contentlistTem = that.data.contentlist;       
        if (res.data.code == 200) {
          if (that.data.page == 1) {
            contentlistTem = []
          }
          var contentlist = res.data.result;
          if (contentlist.length < that.data.pageSize) {
            that.setData({
              contentlist: contentlistTem.concat(contentlist),
              hasMoreData: false
            })
          } else {
            that.setData({
              contentlist: contentlistTem.concat(contentlist),
              hasMoreData: true,
              page: that.data.page + 1
            })
          }        
        }else{
          wx.showToast({
            title: '出现异常'
          })
        }
      }

    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    that.getInfo();
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    this.data.page = 1;
    this.getInfo();
  },

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

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

界面效果如下：