[小程序]页面事件

一、下拉刷新

? ? ? ? 1.开启和配置

? ? ? ? 小程序中开启下拉刷新的方式有两种：

? ? ? ? ①全局开启下来刷新

? ? ? ? ????????在app.json的window节点中，设置enablePullDownRefresh设为ture。

? ? ? ? ②局部开启下来刷新

????????????????在页面对应的json文件的的window节点中，设置enablePullDownRefresh设为ture。

? ? ? ? 还可以通过设置backgroundColor和backgroundTextStyle来配置下拉窗口的颜色的loading样式。

"enablePullDownRefresh": true,
"backgroundColor": "#efefef",
"backgroundTextStyle":"dark"

? ? ? ? 2.监听新事件

? ? ? ? 在对应页面的js文件中使用onPullDownRefresh()进行监听。

<view>下拉次数{{Timer}}</view>

  onPullDownRefresh() {
    this.setData({Timer:this.data.Timer+1});
    wx.stopPullDownRefresh(); //处理完成，停止下拉刷新效果
  },

二、上拉触底

? ? ? ? 1.触底监听

? ? ? ? 在页面的js文件中使用onReachBottom()进行监听

  onReachBottom() {
    this.setData({More:this.data.More+1});
  },

? ? ? ? 需要注意的是，使用这个事件需要页面可以向下滑动（即存在列表或页面长于手机屏幕）

? ? ? ? 通过onReachBottomDistance来配置上拉触底的行程（默认50px）。

? ? ? ? 2.请求节流

? ? ? ? 如果在短时间内触底多次，会造成多次请求数据，所以需要在输出处理过程中对请求进行节流。

? ? ? ? 思路是设置一个标志位isloading，在监听的处理函数中检查这个标志位，并在处理完成后将标志位复位，在复位之前不再响应下拉。

三、Loading效果

? ? ? ? loading效果不属于页面事件，但是多与页面事件联用，故也放在这里。

? ? ? ? loading框需要使用wx.showLoading()函数显示调用，并使用wx.hideLoading()函数隐藏

wx.showLoading({title:'数据加载中...'})    //唤起loading
wx.hideloading()                          //隐藏loading