微信小程序的下拉刷新和上拉触底

onLoad(options)

页面逻辑里，onLoad函数接收一个参数options，其中包含了当前页面路径的参数。看个例子吧。

// pages/index/index.js
Page({
  onReady:function(){
    wx.navigateTo({
      url: '/pages/test/test?name1=value1&name2=value2',
    })
  }
})

// pages/test/test.js
Page({
  onLoad: function (options) {
    console.log(options);
  }
})

onPullDownRefresh | onReachBottom | onPageScroll

页面配置里，enablePullDownRefresh默认是false，我们将其置为true，使能下拉刷新，这样就可以触发onPullDownRefresh事件了。
onReachBottomDistance单位是px，默认值是50，我们不妨将值改小，比如10，这样上拉的话就比较容易触底，就可以触发onReachBottom事件了。
disableScroll默认是false，即默认页面可以上下滚动，我们不妨让页面内容大于页面显示高度，让页面出现滚动条。当页面上下滚动时，会触发onPageScroll事件。
综上，页面配置（pages/index/index.json）如下，

{
  "usingComponents": {},
  "navigationBarBackgroundColor": "#336699",
  "navigationBarTitleText": "数值比较",
  "enablePullDownRefresh": true,
  "onReachBottomDistance":10
}

为了让页面内容高于页面显示区域，pages/index/index.wxml中复制了三份相同的内容，如下，

<!-- 第一份 -->
<view>
  <text>请输入第1个数字：</text>
  <input text="number"/>
</view>
<view>
  <text>请输入第2个数字：</text>
  <input type="number"/>
</view>
<button>比较</button>
<view>
  <text>比较结果：</text>
</view>
<!-- 第二份 -->
<view>
  <text>请输入第1个数字：</text>
  <input text="number"/>
</view>
<view>
  <text>请输入第2个数字：</text>
  <input type="number"/>
</view>
<button>比较</button>
<view>
  <text>比较结果：</text>
</view>
<!-- 第三份 -->
<view>
  <text>请输入第1个数字：</text>
  <input text="number"/>
</view>
<view>
  <text>请输入第2个数字：</text>
  <input type="number"/>
</view>
<button>比较</button>
<view>
  <text>比较结果：</text>
</view>

接下来，就是pages/index/index.js中的内容了，如下，

// pages/index/index.js
Page({
  onPullDownRefresh:function(){
    console.log("页面正在下拉，且已刷新！");
  },
  onReachBottom:function(){
    console.log("页面正在上拉，且已触底！");
  },
  onPageScroll:function(options){
    console.log("页面正在滚动，且距离顶端 ",options.scrollTop.toFixed(2),"px");
  }
})