初学必“晕”的两个Page事件，您肯定不知道的！（框架细节八）

如下图：Page页的事件，onLoad，onShow很容易测试。

onPullDownRefresh()和onReachBottom没看懂，也不知道如何测试！

困扰了好久~

今天灵机一转，终于测试这两个事件了！

onPullDownRefresh()

页面拉到顶部后，再拉就触发此事件！（在app.json的window开启）
即和微信朋友圈下拉相似，一拉就刷新。

onReachBottom()

页面高度大于屏幕高，才容易看出效果。
页面拉到底部就触发，瀑布流动态加载会用到。

1：首先在app.json里开启“enablePullDownRefresh”

//2：js代码
Page({

    onPullDownRefresh: function () {
        console.log("onPullDownRefresh");
    },

    onReachBottom: function () {
        console.log("onReachBottom");
    }

})

//3：WXML代码
<view class="container log-list">

  <scroll-view class="area1">
    区域A
  </scroll-view>

  <scroll-view class="area2">
    区域B
    <text id="vv">(保证大于屏幕的高度，出现下拉框)</text>
  </scroll-view>

  <scroll-view class="area3">
    区域C
  </scroll-view>
</view>

//4：WXSS
.log-list {
  display: flex;
  flex-direction: column;
  padding: 40rpx;
}

.log-item {
  margin: 10rpx;
}

.area1 {
  height: 200rpx;
  background-color: greenyellow;
  text-align: center;
  line-height: 200rpx;
  font-weight: bold;
  color: red;
}

.area2 {
  height: 1300rpx;
  background-color: yellow;
  text-align: center;
  line-height: 1300rpx;
  font-weight: bold;
  color: red;
}

.area3 {
  height: 200rpx;
  background-color: aqua;
  text-align: center;
  line-height: 200rpx;
  font-weight: bold;
  color: red;
}