Shulou(Shulou.com)06/01 Report--

In this article, the editor introduces in detail "how to judge the sliding direction of the page by WeChat Mini Programs". The content is detailed, the steps are clear, and the details are handled properly. I hope that this article "how to judge the sliding direction of the page by WeChat Mini Programs" can help you solve your doubts. Let's follow the editor's ideas to slowly deepen, together to learn new knowledge.

WeChat Mini Programs's solution for judging the sliding direction of the page

1. Use WeChat Mini Programs API

Get the actual height of the page nodesRef.boundingClientRect ([callback])

Listen for the user sliding page event onPageScroll.

two。 Get the actual height of the page

/ * JS * / / Encapsulation function gets the actual height of the element whose ID is box: getScrollHeight: function () {wx.createSelectorQuery (). Select ('# box'). BoundingClientRect ((rect) = > {this.setData ({scrollHeight: rect.height}) console.log (this.data.scrollHeight)}). Exec ()}, / / suppose the data request getDataList: function () {wx.request ({url: 'test.php', / / for example only) Not the real interface address success: function (res) {/ / if the data below this element is obtained dynamically, this method calls this.getScrollHeight ()}} in the callback function of a successful wx.request request.

3. Listen for user sliding page events

/ / listen for user slide page event onPageScroll: function (e) {if (e.scrollTop this.data.scrollHeight) {/ / scroll to the bottom e.scrollTop = this.data.scrollHeight } if (e.scrollTop > this.data.scrollTop | | e.scrollTop > = this.data.scrollHeight) {/ / scroll down console.log ('down', this.data.scrollHeight)} else {/ / scroll up console.log ('scroll up', this.data.scrollHeight)} / / reassign this.setData ({scrollTop: e.scrollTop})} to scrollTop. Read here. This article "how to judge the sliding direction of the page by WeChat Mini Programs" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about the article, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.