微信小程序实现下拉刷新以及三点动画

最新推荐文章于 2025-05-13 21:34:19 发布

原创最新推荐文章于 2025-05-13 21:34:19 发布 · 3.9k 阅读

10 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

小程序

当前文章被收录于：

小程序

91 篇文章 41 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

先来看效果

以上就是本次实现效果

我们主要配置两个文件就可以了,因为这是微信自己封装的刷新,很方便也很简单,不过限制也很多,可能有时候效果达不到我们的需求,那样我们自己就需要自定义封装一个了,这里只简单说一下微信的下拉刷新的使用

json

{
    "enablePullDownRefresh": true,
    "backgroundTextStyle": "dark",
}

enablePllDownRefresh是下拉刷新功能

backgroundTextStyle是三点动画效果,支持dark / light

Js

Page({
    data: {

    },
    /**
   * 数据初始化
   */
  getList: function() {
    wx.request({
      url: '',
      data: {},
      header: "",
      method: "GET",
      success: function(res) {
        
      }
    })
    // 隐藏loading提示框
    wx.hideLoading()
    // 隐藏导航条加载动画
    wx.hideNavigationBarLoading()
    //停止下拉刷新
    wx.stopPullDownRefresh()
  },
  onLoad: function (options) {
    this.openMap()
  },
  /**
   * 刷新操作
   */
  onRefresh: function() {
    // 导航条加载动画
    wx.showNavigationBarLoading()
    //loading提示框
    wx.showLoading({
      title: 'Loading...',
    })
    this.getList()
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {
    this.onRefresh()
  }

})

以上就是所有代码

QQ群: 1102727334