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

谁借莪１个温暖的怀抱￠ 2023-02-20 07:18 17阅读 0赞

先来看效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70][]

以上就是本次实现效果

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

# 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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200624160255487.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0,size_16,color_FFFFFF,t_70