How does a WeChat applet monitor users' scrolling up or down?

coldplay.xixi
Release: 2020-07-22 10:48:30
Original
4495 people have browsed it

The WeChat applet monitors the user's sliding up or down method: first define the hidden used by the two modules that need to be switched; then define two variables in the data to accept the changed true or false; then use the data data It is used to determine whether the module displays hidden variables; finally, it is enough to collect the monitoring results.

How does a WeChat applet monitor users' scrolling up or down?

Methods for WeChat applet to monitor whether the user slides up or down:

Idea: first monitor whether the user slides up or down It is still sliding. After listening to the results, change the variables in the data data used to determine whether the module is displayed or hidden. The two modules that need to be switched use hidden. Two variables are defined in the data to accept the changed true or false.

The code is:

hidden='{{bottom}}'
hidden='{{top}}'
 
data{
//初始化状态 
top:true,
bottom:false,
}
 
//判断浏览器滚动条上下滚动
if (t.scrollTop > a.data.scrollTop || t.scrollTop == wx.getSystemInfoSync().windowHeight) {
console.log('向下滚动');
// 改变显示隐藏的状态
a.setData({
bottom: true,
top: false
})
console.log(a.data.bottom)
} else {
console.log('向上滚动');
a.setData({
 
bottom: false,
top: true
})
console.log(a.data.bottom)
}
Copy after login

Related learning recommendations: WeChat Mini Program Development Tutorial

The above is the detailed content of How does a WeChat applet monitor users' scrolling up or down?. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template