WeChat applet implementation anchor positioning function example

Preface

In the development of small programs, we often encounter the need to scroll the list to view, so using anchor positioning can achieve a more friendly interactive experience. Let's take a look at the effect achieved in the project:

Functionality

Implemented using the mini-program view container component: scroll-view

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

<scroll-view style="height:{{autoHeight}};" scroll-y scroll-into-view="{{toView}}" class="scroll-warp" scroll-with-animation="{{true}}" bindscroll="handelScroll">
   <block wx:for="{{dataList}}" wx:key="{{index}}">
      <view class="floorType" id="{{item.floor}}">
     </view>
   </block>
</scroll-view>

Here, autoHeight is dynamically calculated based on the height of different models. Scroll-view has an important attribute: scroll-into-view, which receives a string value, which is the scrolling location (anchor point). Then we need to set the corresponding anchor point list in the scroll-view child node: such as the id attribute in the class=floorType node in the figure above. In this way, our scrolling will have a one-to-one correspondence. Click the floor in the filter block, set the toView variable to the corresponding data, and the list will scroll to the corresponding position.
When we scroll the list, the highlighted filter items at the top also need to be switched accordingly. What should we do at this time?

We can do something with 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(let i=0;i<scrollArr.length;i++){
                    if(scrollTop>=0&&scrollTop<scrollArr[0]){
                    // selectFloorIndex controls the highlighting of the filter block this.setData({
                            selectFloorIndex: 0
                        });
                    }else if(scrollTop>=scrollArr[i-1]&&scrollTop<scrollArr[i]) {
                        this.setData({
                            selectFloorIndex: i
                        });
                 }
             }
         }
    }

Here, anchorArray is the sum of the arrays of the page height occupied by all anchor blocks. It can be seen more clearly with a picture:

Each anchor block has a fixed height. After we get the data and render the page, we can use
The boundingClientRect method gets the height of each node with the class name floorType and puts these heights into the anchorArray array. Then, when we scroll beyond the height of a certain anchor point, the top filter item will also switch to the next one.

Key code:

            let query = wx.createSelectorQuery().in(this);
            let heightArr = [];
            let h = 0;
            query.selectAll('.floorType').boundingClientRect((react)=>{
                react.forEach((res) => {
                    h+=res.height;
                    heightArr.push(h)
                })
                this.setData({
                    anchorArray:heightArr
                });
            }).exec();

At this point, our anchor point positioning scrolling has been completed. I hope it can be helpful to everyone. If you have any questions, please feel free to communicate and point them out!

Summarize

This is the end of this article about how to implement anchor point positioning in WeChat Mini Programs. For more information about WeChat Mini Program anchor point positioning, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!