一、enablePullDownRefresh=true

下拉刷新在手机应用中是比较常用的操作。在小程序框架中内置了下拉刷新操作。

下拉动画为三个点样式，目前没有提供修改下拉进度条显示。

注：使用时最好在配置文件中制定页面背景，看不到下拉刷新进度条。

enablePullDownRefresh属性为window节点下，如果在app.json中启用，则所有页面都会开启。如果在页面自己的json配置中，仅对当前页面起作用。

使用步骤：

1.配置文件，启用下拉刷新

{  "enablePullDownRefresh": true,  "backgroundColor": "blue"}

2.注册页面，下拉刷新事件，执行刷新请求

/**   * 页面相关事件处理函数--监听用户下拉动作   */  onPullDownRefresh: function () {    wx.showLoading({      title: '正在刷新',    })    this.initData();  },

3.停止刷新动画

wx.stopPullDownRefresh();

二、示例1.

配置内容

{  "enablePullDownRefresh": true,  "backgroundColor": "blue"}

wxss

page {  height: 100%;  background: yellow;}.page {  background: red;  width: 100%;  height: 100%;}

js

/**   * 页面相关事件处理函数--监听用户下拉动作   */  onPullDownRefresh: function () {    console.info('下拉刷新');    setTimeout(function () {      console.info('刷新完成');      //执行ajax请求后停止下拉      wx.stopPullDownRefresh();    }, 1000);  },

三、示例2，使用统一initDatta() 处理加载

1.配置文件

{  "enablePullDownRefresh": true,  "backgroundColor": "red"}

2.wxss

page{  background: #ddd;}

3.js

//初始化数据加载  initData: function () {    setTimeout(function () {      //请求结束      wx.stopPullDownRefresh();      wx.hideLoading();    }, 1000);  },  /**   * 生命周期函数--监听页面加载   */  onLoad: function (options) {    this.initData();  },  /**   * 页面相关事件处理函数--监听用户下拉动作   */  onPullDownRefresh: function () {    wx.showLoading({      title: '正在刷新',    })    this.initData();  },

更多：