小程序下拉刷新

最新推荐文章于 2025-05-21 03:31:41 发布

原创最新推荐文章于 2025-05-21 03:31:41 发布 · 3.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #下拉刷新

小功能同时被 2 个专栏收录

7 篇文章

订阅专栏

微信

7 篇文章

订阅专栏

本文介绍了如何在微信小程序中实现下拉刷新功能，包括配置app.json启用下拉刷新、使用wx.startPullDownRefresh()触发刷新及通过onPullDownRefresh()进行数据更新的方法。

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

个人理解：在触发下拉时，调用onload，实现重新加载的目的。所以想要触发刷新时，也可以在添加信息后，触发下拉

wx.startPullDownRefresh();

实现刷新的目的。
当然是先目的后关闭下拉：

wx.stopPullDownRefresh()

在这些之前，要在app.json中开启下拉：

"window":{
    "backgroundTextStyle":"dark",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "啊啊啊",
    "navigationBarTextStyle":"black",
    "enablePullDownRefresh": true
  },

backgroundTextStyle 设置为 dark 是为了可见下拉时的三个点。。

示例：

  /**
  * 页面相关事件处理函数--监听用户下拉动作
  */
  onPullDownRefresh: function () {
    var that = this;
    // console.log(options.uid); //2
    wx.request({
      url: getApp().globalData.server + 'index/index/address',
      data: {
        // id: options.uid,
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      method: 'GET',
      success: function (res) {
        console.log(res.data);   //3
        if (res.data.msg == '0') {
          console.log(res.data.msg);
        } else {
          console.log(res.data.address);
          var address = res.data.address;

          that.setData({
            items: address,

          })
          wx.stopPullDownRefresh()

        }

      }
    })

  },