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

这篇具有很好参考价值的文章主要介绍了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页面的函数调用。文章来源地址https://www.toymoban.com/news/detail-563467.html

到了这里，关于web之移动端实现触底和触顶功能、微信小程序、置顶、置底、触发、uniApp、onReachBottom、onPageScroll的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！