微信小程序怎么实现锚点定位功能

这篇“微信小程序怎么实现锚点定位功能”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“微信小程序怎么实现锚点定位功能”文章吧。

成都创新互联公司成都企业网站建设服务,提供成都网站制作、成都做网站、外贸营销网站建设网站开发,网站定制,建网站,网站搭建,网站设计,自适应网站建设,网页设计师打造企业风格网站,提供周到的售前咨询和贴心的售后服务。欢迎咨询做网站需要多少钱:028-86922220

实现效果:

微信小程序怎么实现锚点定位功能            

功能实现

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

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


   
      
     
   

这里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=0&&scrollTop=scrollArr[i-1]&&scrollTop

这里的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();

以上就是关于“微信小程序怎么实现锚点定位功能”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注创新互联行业资讯频道。


网站题目:微信小程序怎么实现锚点定位功能
链接地址:http://scyanting.com/article/pesggj.html