In the development of small programs, monitoring the scrolling events of the page is a common requirement. By listening to the scrolling events of the page, we can achieve some special effects, such as lazy loading, pull-down refresh, etc. This article will introduce how to monitor the scrolling event of the page in the applet, and give some practical sample codes.
introduction
With the popularity and development of mini programs, more and more developers hope to achieve richer interactive experiences in mini programs. Listening to the scroll event of the page is one of the important functions, which allows us to trigger corresponding operations when the user scrolls the page. Next, we will introduce step by step how to implement this function in the mini program.
Chapter 1: Monitoring the scrolling events of the page
PageTo listen to the scrolling events of the page, we need to use the methods of the objects provided by the applet onPageScroll. In the life cycle function of the page onLoad, we can register the scroll event listener through the following code:
onLoad: function() {
wx.pageScrollTo({
scrollTop: 0,
duration: 0
});
wx.createIntersectionObserver(this, {
thresholds: [0, 1],
observeAll: true
}).relativeToViewport({
top: 0}).observe('.scroll-view', (res) => {
if (res.intersectionRatio > 0) {
console.log('页面进入视图');
} else {
console.log('页面离开视图');
}
});
}
In the above code, we have used wx.pageScrollTothe method to scroll the page to the top. We then use wx.createIntersectionObserverthe method to create a cross observer and bind it to the specified .scroll-viewelement. By setting thresholdsparameters we can define the thresholds for pages to enter and leave view. In the observer's callback function, we can intersectionRatiodetermine whether the page enters the view based on the value.
Chapter 2: Practical Examples
Below are some practical examples that show how to use listening to scroll events on the page to achieve some common effects.
Example 1: Lazy loading of images
onLoad: function() {
wx.createIntersectionObserver(this, {
thresholds: [0, 1],
observeAll: true
}).relativeToViewport().observe('.lazy-load', (res) => {
if (res.intersectionRatio > 0) {
const img = res.dataset.src;
if (img) {
res.src = img;
res.removeAttribute('data-src');
}
}
});
}
In the above example, we can srcset the attribute of the image that needs to be loaded lazily to a custom data-srcattribute. Then, by listening to the scroll event of the page, when the picture enters the view, the data-srcvalue of the attribute is assigned to srcthe attribute to achieve the lazy loading effect of the picture.
Example 2: Pull down to refresh
onPullDownRefresh: function() {
// 执行下拉刷新操作
console.log('下拉刷新');
wx.stopPullDownRefresh();
}
In the above example, we use onPullDownRefreshthe life cycle function provided by the applet to monitor the user's pull-down refresh operation. When the user pulls down the page, we can perform corresponding refresh operations in this function, such as reloading data or updating page content.
in conclusion
By listening to the scrolling events of the page, we can achieve some interesting and practical effects and improve the user experience of the mini program. This article introduces how to monitor the scrolling events of the page in a mini program, and gives some practical sample codes. I hope this article will help you implement scrolling event monitoring in applet development.
Note: The sample code in this article is based on WeChat mini program development, and the implementation of other mini program platforms may be different.
The above is the content of the article about how the applet monitors the scrolling events of the page. Hope this helps!
Reference links: