The mobile end of the web realizes bottoming and topping functions, WeChat applets, top, bottom, trigger, uniApp, onReachBottom, onPageScroll

---

WeChat applet

hit bottom

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

onReachBottom
Listen to the user's pull-up bottoming event.
The trigger distance can be set in the app.jsonoptions windowor page configuration onReachBottomDistance.
During the sliding period within the trigger distance, this event will only be triggered once.

peaking event

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

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

onPageScroll(Object object)
Listen for user sliding page events.
The property of the parameter Object objectis scrollTop; the type is Number, indicating the scrolling distance of the page in the vertical direction, and the unit is px.
Please define this method in only when you need it page, don't define empty method. To reduce the impact of unnecessary event dispatch on the logic layer communication of the rendering layer.
Please avoid onPageScrollperforming operations that cause logic layer-rendering layer communication too frequently in setData. Especially if a large amount of data is transmitted each time, it will affect the time-consuming communication.

---

sleepApp

hit bottom

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

The event of scrolling to the bottom of the page (not scroll-viewscrolling to the bottom), which is often used to pull down the next page of data.
onReachBottomYou can pages.jsondefine the trigger distance of the bottom of the specific page in onReachBottomDistance. For example, if it is set , the event will be triggered when 50the page is scrolled to the bottom .50pxonReachBottom

hit the top

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

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

scrollTopReturns Numberthe type, the distance that the page has scrolled in the vertical direction, and the unit is px.
onPageScrollDo not write complex interactions js, such as frequently modifying pages. Because this life cycle is triggered at the rendering layer, at the non- h5end, jsit is executed at the logic layer, and the communication between the two layers is lossy. If the data exchange between the two layers is frequently triggered during the scrolling process, it may cause lag.
If you want to realize the transparent gradient of the title bar when scrolling, you can configure the following in Appand below . If some elements need to be fixed by the scroll ceiling, it is recommended to use the sticky layout, refer to the plug-in market. There are also other ceiling plug-ins in the plug-in market, but their performance is not good, so you can search for them yourself when you need them. In , WeChat applet, , you can also use monitor scrolling; in , you can use monitor scrolling. Not available on , which would result in failure to prevent the default return.H5pages.jsontitleNViewtypetransparent
cssjs
AppH5wxsapp-nvuebindingx
onBackPressasync

---

Application Scenario

This application scenario will be used more when customizing the tabBar , because when customizing the tabBar, the corresponding tabBarpage will not trigger bottoming and scrolling events. At this time, tabBarthe bottoming and scrolling events of the stored parent page will be triggered, which can be borrowed to refimplement the function call of the corresponding tabBarpage.