置顶

小程序实战(九):小程序实现下拉刷新

作者:勇康博客网 | 分类:小程序 | 浏览:1260 | 日期:2022年06月14日

上一篇我们讲了配置【小程序实现上拉分页】,有兴趣的小伙伴可以移步至小程序实现上拉分页查看。这一节我们讲【小程序实现下拉刷新】。

下拉刷新这个玩意吧,很有用,但是在我博客关联的小程序中,用处不大,也是,我那个小程序一共也没有几个页……

我这里还是用在首页,上拉分页,下拉刷新重载分页。我就是这么做的。

下拉刷新和上拉分页还是有区别的。

下拉刷新需要在index.json中添加属性:

"enablePullDownRefresh": true

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();

      }
    });
  },
  /**
   * 下拉刷新
   */
  onPullDownRefresh() {
    // 下拉刷新
    var self = this;
    wx.showLoading({
      title: '加载中...',
});
// 页码重新设置回1
self.data.page = 1;
// 将显示列表数据清空
    self.data.allProject = [];
    self.getArticleList();
    wx.stopPullDownRefresh();
  }, 

});

可以看到,我们增加了一个onPullDownRefresh函数并在里面调用了getArticleList去请求第一页的数据,并且页面显示数据的数组清空, 页码设置成1,重新加载数据。

另外,下拉刷新的事件也可以通过调用APIwx.startPullDownRefresh触发,效果与用户手动下拉刷新一致。

微信小程序其实我觉得就是一个基于微信的APP。嗯,个人看法。

发表评论

游客 游客 2024-07-10 · 回复该评论
今天过得很不爽!http://47m80.xmlytx.com

游客 游客 2024-07-10 · 回复该评论
每次看到楼主的帖子都有惊吓!http://2f4fq.zb799.com

游客 游客 2024-07-09 · 回复该评论
看帖回帖一条路!http://2a6.chinacement114.com

游客 游客 2024-07-09 · 回复该评论
最近压力山大啊!http://93u.chinacement114.com

取消
微信二维码
微信二维码
支付宝二维码