微信小程序怎么实现锚点定位功能
这篇“微信小程序怎么实现锚点定位功能”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“微信小程序怎么实现锚点定位功能”文章吧。
实现效果：
功能实现
采用小程序视图容器组件实现：scroll-view
这里需要注意的是，竖向滚动时，scroll-view需要指定一个固定高度，我们看下WXML代码：
<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>这里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();以上就是关于“微信小程序怎么实现锚点定位功能”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注蜗牛博客行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：niceseo99@gmail.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
评论