您所在的位置:首页 - 小程序 - 正文小程序

小程序实战(八):小程序实现上拉分页

勇康博客网 勇康博客网 06-14 【小程序】 404人已围观

摘要上一篇我们讲了【小程序的时间轴组件】,有兴趣的小伙伴可以移步至小程序的时间轴组件查看。这一节我们讲【小程序实现上拉分页】文章列表需要做分页了一般APP或者手机端一般给我们提供的都是,上拉分页,但是vant小程序版的组件是为我们提供了类似于PC网页那样的页码分页。但是吧,我就不太想用web网站那样做一串数字页码那样了,这是反人类的设计。使用上拉进行分页。小程序为我们提供了上拉加载事件:onPullDownRefresh/**   * 页面相关事件处理函

上一篇我们讲了【小程序的时间轴组件】,有兴趣的小伙伴可以移步至小程序的时间轴组件查看。这一节我们讲【小程序实现上拉分页】

文章列表需要做分页了

一般APP 或者 手机端一般给我们提供的都是,上拉分页,但是vant小程序版的组件是为我们提供了类似于PC网页那样的页码分页。

但是吧,我就不太想用web网站那样做一串数字页码那样了,这是反人类的设计。使用上拉进行分页。

小程序为我们提供了上拉加载事件:onPullDownRefresh

/**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

对,就是这个玩意。

这个直接就能触发,不需要其他什么多余的设置,下边我分享一下,我上拉分页的代码。

Index.js

Page({
  data: {
    // 文章数组
    articleList:[],
    //每页显示的行数:
    pagesize: 20,
    //页码(从1开始)
    page:1,// 文章页码
    //用于标识是否还有更多的状态
    state: 1,
    //用于数组的追加和暂存
    allProject: [],
  },
/**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    var self = this;
    self.getArticleList();
  },
    /**
   * 获取文章列表
   */
  getArticleList()
  {
    var self = this;
    // 请求后台接口获取文章列表
    wx.request({
      // 请求连接
      url: 'https://guanchao.site/index/xxxx/xxxxx,
      // 请求所需要的的参数
      data: {
        'page':self.data.page
      },
      success(result){
        var resData = result.data;
        var resLength = result.data.length;
        //如果搜出来的结果<1 就说明后面已经没数据可加载了,所以将state设为0
        if (resLength < 1)
        {
          self.setData({
            state: 0
          });
        }
        else
        {
          var state1 = 1;
          //如果有数据,但小于每次期望加载的数据量(pagesize),将state设为0,表示后面已没有数据可加载
          if (resLength < self.pagesize)
          {
            var state1 = 0;
          }
          //循环将结果集追加到数组后面
          for (var i = 0; i < resLength; i++) {
            self.data.allProject.push(resData[i]);
          }
          self.setData({
            articleList: self.data.allProject,
            state: state1
          });
        }
        wx.hideLoading();

      }
    });
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    var self = this;
    var state = self.data.state;
    if (state > 0){
        // wx.showLoading({
        //     title: '加载中...',
        // });
        self.data.page = self.data.page + 1;
        self.getArticleList()
        // wx.hideLoading();
    }
  },   

});

以上大概就是上拉分页的代码,说是上拉分页,其实就是滚动条触底触发的方法。但是为了体验的更好,还是需要做一些限制的。

大概就是这么实现的,下一节我们讲【小程序实现下拉刷新】

Tags: 小程序实战

打赏!

分享到:

文章评论 (暂无评论,404人围观)

我的名片

网名:勇康博客网

职业:攻城狮

现居:广东深圳

Email:909199238@qq.com

站长寄语:穷且益坚,不坠青云之志

  • 我的微信
icp赣ICP备2021004727号-2 icp粤公网安备 44030902003287号
取消
微信二维码
微信二维码
支付宝二维码
关注微信公众号 关注微信公众号
132-4242-5235
7*24小时客服电话