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

Most people do not understand the knowledge points of this article "how to achieve the anchor positioning function of WeChat Mini Programs", so the editor summarizes the following contents for you. The content is detailed, the steps are clear, and it has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to achieve anchor positioning function by WeChat Mini Programs" article.

Achieve results:

Function realization

Using Mini Program view container component to implement: scroll-view

It should be noted here that when scrolling vertically, scroll-view needs to specify a fixed height. Let's take a look at the WXML code:

Here autoHeight is dynamically calculated according to the height of different models. Scroll-view has an important attribute: scroll-into-view, which receives a string value, that is, the scrolling place (anchor), so we need to set the corresponding anchor list in the scroll-view child node: the id attribute in the class=floorType node in the figure above. In this way, our scrolling has an one-to-one correspondence. Click on the floor in the filter block, set the toView variable to the corresponding data, and the list will scroll to the corresponding location.

When we scroll through the list, the highlight filter at the top also needs to switch, so what do we do at this time?

We can play on the bindscroll event: this event is triggered when the list is scrolled.

Key code:

HandelScroll (e) {let scrollTop=e.detail.scrollTop; let scrollArr= this.data.anchorArray; if (scrollTop > = scrollArr [scrollArr. Length-1]-this.data.autoHeight) {return;} else {for (scrollArr (res) = scrollArr [I-1] & scrollTop {react.forEach ((length) = > {h+=res.height) HeightArr.push (h)}) this.setData ({anchorArray:heightArr});}. Exec () The above is about the content of this article on "how to achieve the anchor location function of WeChat Mini Programs". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please 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.