应用您现在的位置是:首页 > 专栏文集 > 微信小程序开发 > 应用

微信小程序下拉刷新/上拉加载更多

<a href='mailto:'>微wx笑</a>的头像微wx笑2019-10-22 14:06:31应用人已围观关键字:微信小程序

简介查看文档,在用page()函数注册页面的时候有这样的两个对象参数用户判断用户在最顶部下拉和到达最底部,在小程序里,用户顶部下拉是默认禁止的,我们需要把他设置为启用,在app.json中

查看文档,在用page()函数注册页面的时候有这样的两个对象参数用户判断用户在最顶部下拉到达最底部,Ft5编程技术_踩坑日志_进阶指南 - 无知人生

Ft5编程技术_踩坑日志_进阶指南 - 无知人生

在小程序里,用户顶部下拉是默认禁止的,我们需要把他设置为启用,在app.json中的设置对所有页面有效,在单独页面设置则对当前页面有效;Ft5编程技术_踩坑日志_进阶指南 - 无知人生

看一下json文件Ft5编程技术_踩坑日志_进阶指南 - 无知人生

 Ft5编程技术_踩坑日志_进阶指南 - 无知人生

"enablePullDownRefresh": true,


注意这里的true是布尔型而不是字符;Ft5编程技术_踩坑日志_进阶指南 - 无知人生

 Ft5编程技术_踩坑日志_进阶指南 - 无知人生

Ft5编程技术_踩坑日志_进阶指南 - 无知人生

有同学说设置完之后可以下拉,但是看不到图标;Ft5编程技术_踩坑日志_进阶指南 - 无知人生

在app.json中这样设置;Ft5编程技术_踩坑日志_进阶指南 - 无知人生

Ft5编程技术_踩坑日志_进阶指南 - 无知人生

这样下拉之后就可以看到了;Ft5编程技术_踩坑日志_进阶指南 - 无知人生

每个页面生成的时候已经默认为我们设置了前面提到的onPullDownRefresh函数和onReachBottom函数Ft5编程技术_踩坑日志_进阶指南 - 无知人生

直接上代码:Ft5编程技术_踩坑日志_进阶指南 - 无知人生

page为全局变量,用在在后面的加载请求,这里要和编写数据接口的同事讨论好请求;Ft5编程技术_踩坑日志_进阶指南 - 无知人生

 // 下拉刷新
  onPullDownRefresh: function () {
    // 显示顶部刷新图标
    wx.showNavigationBarLoading();
    var that = this;
    wx.request({
      url: 'https://xxx/?page=0',
      method: "GET",
      header: {
        'content-type': 'application/text'
      },
      success: function (res) {
        that.setData({
          moment: res.data.data
        });
        console.log(that.data.moment);
        // 隐藏导航栏加载框
        wx.hideNavigationBarLoading();
        // 停止下拉动作
        wx.stopPullDownRefresh();
      }
    })
  },

上拉加载更多:Ft5编程技术_踩坑日志_进阶指南 - 无知人生

/**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    var that = this;
    // 显示加载图标
    wx.showLoading({
      title: '玩命加载中',
    })
    // 页数+1
    page = page + 1;
    wx.request({
      url: 'https://xxx/?page=' + page,
      method: "GET",
      // 请求头部
      header: {
        'content-type': 'application/text'
      },
      success: function (res) {
        // 回调函数
        var moment_list = that.data.moment;
        const oldData = that.data.moment;
        that.setData({
           moment:oldData.concat(res.data.data)
        })
        // 隐藏加载框
        wx.hideLoading();
      }
    })
 
  },

完成。Ft5编程技术_踩坑日志_进阶指南 - 无知人生

版权声明:本文为CSDN博主「ruff1996」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。Ft5编程技术_踩坑日志_进阶指南 - 无知人生

原文链接:https://blog.csdn.net/ruffaim/article/details/78839214Ft5编程技术_踩坑日志_进阶指南 - 无知人生

很赞哦! () 有话说 ()

上一篇:返回列表

下一篇:返回列表

站点信息

  • 建站时间:2018-10-24
  • 服务期限阿里云ECS 2027年到期
  • 主题模板:基于《今夕何夕》修改
  • 文章统计:236篇
  • 文章评论:16条
  • 文章阅读:4191次
  • 文章点赞:1232次
  • 微信公众号:扫描二维码,关注我们
  • 二维码-微信公众号-微wx笑