微信小程序下拉刷新

一、配置(JSON文件)

"enablePullDownRefresh":true

二、下拉刷新事件

1、手动触发

onPullDownRefresh: function () {
    // 显示动画
    wx.showNavigationBarLoading();
    this.setData({
      currentPage: 1
    })
    this.searchData(this.data.currentPage);
  },

2、自动触发(会触发onPullDownRefresh事件)

searchData: function (current) {
    // 隐藏动画
    wx.hideNavigationBarLoading();
    // 停止刷新
    wx.stopPullDownRefresh();
  },

3、停止刷新

// 隐藏动画
wx.hideNavigationBarLoading();
// 停止刷新
wx.stopPullDownRefresh();

三、刷新动画

1、导航条加载动画

//显示动画
wx.showNavigationBarLoading()
//隐藏动画
wx.hideNavigationBarLoading()

2、模态框动画

wx.showToast({
    title:'loading....',
    icon:'loading'
});

发表评论