web之移动端实现触底和触顶功能、微信小程序、置顶、置底、触发、uniApp、onReachBottom、onPageScroll

---

微信小程序

触底

/**
 * 上拉触底事件
 */
onReachBottom() {
     
     
	console.log('上拉触底事件触发');
}

onReachBottom
监听用户上拉触底事件。
可以在app.json的window选项中或页面配置中设置触发距离onReachBottomDistance。
在触发距离内滑动期间，本事件只会被触发一次。

触顶事件

onPageScroll({
      
       scrollTop }) {
     
     
	console.log('页面滑动触发');

	if(scrollTop === 0) conosle.log('触顶');
}

onPageScroll(Object object)
监听用户滑动页面事件。
参数Object object的属性为scrollTop；类型为Number，表示页面在垂直方向已滚动的距离，单位是px。
请只在需要的时候才在page中定义此方法，不要定义空方法。以减少不必要的事件派发对渲染层逻辑层通信的影响。
请避免在onPageScroll中过于频繁的执行setData等引起逻辑层-渲染层通信的操作。尤其是每次传输大量数据，会影响通信耗时。

---

uniApp

触底

onReachBottom() {
     
     
	console.log('触底');
}

页面滚动到底部的事件(不是scroll-view滚到底)，常用于下拉下一页数据。
onReachBottom可在pages.json里定义具体页面底部的触发距离onReachBottomDistance，比如设为50，那么滚动页面到距离底部50px时，就会触发onReachBottom事件。

触顶

onPageScroll({
      
       scrollTop }) {
     
     
    console.log('监听页面滚动');

    if (scrollTop === 0) console.log('页面触顶');
}

scrollTop返回的是Number类型，页面在垂直方向已滚动的距离，单位为px。
onPageScroll里不要写交互复杂的js，比如频繁修改页面。因为这个生命周期是在渲染层触发的，在非h5端，js是在逻辑层执行的，两层之间通信是有损耗的。如果在滚动过程中，频发触发两层之间的数据交换，可能会造成卡顿。
如果想实现滚动时标题栏透明渐变，在App和H5下，可在pages.json中配置titleNView下的type为transparent。
如果需要滚动吸顶固定某些元素，推荐使用css的粘性布局，参考插件市场。插件市场也有其他js实现的吸顶插件，但性能不佳，需要时可自行搜索。
在App、微信小程序、H5中，也可以使用wxs监听滚动；在app-nvue中，可以使用bindingx监听滚动。
onBackPress上不可使用async，会导致无法阻止默认返回。

---

应用场景

此应用场景会在自定义tabBar时用得比较多，因为自定义tabBar时，对应的tabBar页面不会触发触底和滚动事件。此时存放tabBar的父页面的触底和滚动事件会被触发，可以借用ref实现对应tabBar页面的函数调用。