• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序实现锚点定位功能的方法实例

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

前言

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

            

功能实现

采用小程序视图容器组件实现: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();

到这里,我们的锚点定位滚动已完成,希望能对大家有所帮助,如有问题,欢迎沟通指出!

总结

到此这篇关于微信小程序实现锚点定位功能的文章就介绍到这了,更多相关微信小程序锚点定位内容请搜索极客世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持极客世界!


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
Node与Python 双向通信的实现代码发布时间:2022-02-05
下一篇:
JavaScript defineProperty如何实现属性劫持发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap