微信小程序實現下拉刷新以及三點動畫

先來看效果

以上就是本次實現效果

我們主要配置兩個文件就可以了,因爲這是微信自己封裝的刷新,很方便也很簡單,不過限制也很多,可能有時候效果達不到我們的需求,那樣我們自己就需要自定義封裝一個了,這裏只簡單說一下微信的下拉刷新的使用

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