微信小程序如何实现锚点定位功能

这篇文章将为大家详细讲解有关微信小程序如何实现锚点定位功能，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

前言

在小程序开发中，我们经常会遇到滚动列表查看的需求，那么使用锚点定位来实现可以达到交互体验更加友好的效果，我们看下项目中实现的效果：

功能实现

采用小程序视图容器组件实现：scroll-view

这里需要注意的是，竖向滚动时，scroll-view需要指定一个固定高度，我们看下WXML代码：

<scroll-view  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>

这里autoHeight是根据不同机型的高度动态计算出来的，scroll-view有个重要属性：scroll-into-view，它接收一个string值，即为滚动的地点（锚点），那么我们需要在scroll-view子节点也设置相应的锚点列表：如上图的class=floorType节点中的id属性。这样我们的滚动就有了一一对应的关系了，在筛选块点击楼层，将toView变量设置成对应的数据，列表也会滚动到对应的位置。
当我们滚动列表的时候，顶部的高亮筛选项也需要对应切换，那这个时候怎么办呢？

我们可以在bindscroll此事件上做文章：滚动列表的时候会触发此事件。

关键代码：

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控制筛选块高亮显示                         this.setData({                             selectFloorIndex: 0                         });                     }else if(scrollTop>=scrollArr[i-1]&&scrollTop<scrollArr[i]) {                         this.setData({                             selectFloorIndex: i                         });                  }              }          }     }

这里的anchorArray为所有锚点块所占页面高度的数组总和，用图可以看得更加清晰一点：

每个锚点块都有一个固定的高度，我们在拿到数据渲染完页面后，可以通过
boundingClientRect方法拿到类名为floorType各个节点的高度，并将这些高度装进anchorArray数组中，那么当我们滚动超过某块锚点高度之后，顶部筛选项也会随之切换到下一个。

关键代码：

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();

关于“微信小程序如何实现锚点定位功能”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。