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

2024-12-15 11:30:33

前言

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

功能实现

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

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

总结

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

微信小程序实现锚点定位楼层跳跃的实例

微信小程序实现楼层锚点跳跃,点击不同的锚点进行位置跳跃: 利用:scroll-into-view 来实现效果图如下: WXML: <scroll-view class="content" scroll-into-view="{{toView}}" scroll-y="true" scroll-with-animation="true"> <view wx:for="{{act_addList}}&
微信小程序 scroll-view实现锚点滑动的示例

前言最近开始做小程序,通读一遍文档再上手并不算难,但不得不说小程序里还是有一些坑.这里说一下如何实现页面锚点跳转,一个城市列表的效果示意图如下: 因为在微信小程序的环境中不能想在浏览器里设置标签,或者操作dom滚动,传统做法就行不通了,一切都得按小程序的文档来. 一开始我们的做法是使用boundingClientRect()方法获取每个锚点的坐标,然后再用wx.pageScrollTo()方法滑动过去.结果发现效果不是很好,因为boundingClientRect方法返回的每个点的坐标会随着屏
微信小程序 scroll-view 实现锚点跳转功能

在微信小程序中,使用 scroll-view 实现长页面的标记跳转,官方文档中没有例子演示,锚点标记主要是使用<scroll-view> 的 scroll-into-view 属性. 实现锚点跳转主要以下几点: 1.最外层容器使用 scroll-view 2.赋值scroll-into-view,如:<scroll-view scroll-into-view="{{toView}}"> 3.设置 scroll-view 滚动方向 scroll-y="t
微信小程序实现锚点跳转

本文实例为大家分享了微信小程序实现锚点跳转的具体代码,供大家参考,具体内容如下 1.先上效果图,看看是不是你想要的. 2.主要用到的微信小程序的scroll-view 组件实现该效果.核心主要是使用scroll-into-view属性跳转对应的标签页和标签内容区域和bindscroll事件监听标签内容区域距离页面顶部的距离来判断顶部的标签应该处于哪个标签. 3.wxml代码:  <view class="text" style=&
微信小程序实现锚点功能

"锚点"功能在实际应用设计的好,可以提高用户体验.今天碰到一个类似下面功能: 由于页面数据比较多,除了做些上拉加载,下拉刷新等优化.还可以进行进行分类,如上图.功能要求:点击导航的菜单,相应页面的分类内容滑动到页面顶部.由于微信小程序页面无dom操作,改功能改如何操作呢? 一开始想到 wx.pageScrollTo(Object object) 这个API,由于每个点击每个导航利用wx.pageScrollTo滚动到相应分类的scrollTop不能确定,所以放弃了. 后发现 scrol
微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)

1.wxml代码: <view class="page"> <import src="../../components/catering-item/catering-item.wxml" />  <view class='under_line'></view> <view class="body"> <view style='float: l
微信小程序scroll-view锚点链接滚动跳转功能

html <view class="list"> <view bindtap='jumpTo' wx:for="{{keys}}" data-item="{{item}}">{{item}}</view> </view> <scroll-view scroll-into-view="{{toitem}}" scroll-y="true" scroll-w
微信小程序实现锚点定位功能的方法实例

前言在小程序开发中,我们经常会遇到滚动列表查看的需求,那么使用锚点定位来实现可以达到交互体验更加友好的效果,我们看下项目中实现的效果: 功能实现采用小程序视图容器组件实现:scroll-view 这里需要注意的是,竖向滚动时,scroll-view需要指定一个固定高度,我们看下WXML代码: <scroll-view style="height:{{autoHeight}};" scroll-y scroll-into-view="{{toView}}"
微信小程序导航栏滑动定位功能示例(实现CSS3的positionsticky效果)

本文实例讲述了微信小程序导航栏滑动定位功能.分享给大家供大家参考,具体如下: 实现的效果实现的原理 1. 通过对scroll的监听获取滚动条的scrollTop值; 2. 在导航的class判断scrollTop; 3. 切换position:fixed与position:relative. WXML <view style="height:100%;position:fixed;width:100%;"> <scroll-view scroll-y="f
微信小程序城市选择及搜索功能的方法

实现搜索城市功能参考微信小程序之『仿美团城市选择城市切换』 https://github.com/cinoliu/-selectCity js文件 // pages/address/address.js var app = getApp() Page({ data: { searchLetter: [], showLetter: "", winHeight: 0, cityList: [], isShowLetter: false, scrollTop: 0,//置顶高度 sc
微信小程序返回上一页的各种方法实例

目录一.方法罗列二.讲解三.常用案例四.总结补充:微信小程序如何返回上一个页面并刷新上一个页面总结返回上一页,一共有4中方法,每种方法都有不一样细节一.方法罗列函数说明 navigator 保留当前页面,在wxml使用 wx.navigateTo 保留当前页面,在js使用 wx.redirectTo 不保留当前页面,在js使用 wx.switchTab 不保留当前页面,跳转到tabBar页二.讲解 1️⃣ navigate <navigator url=".路径&qu
微信小程序实现带刻度尺滑块功能

摘要: 与自带的slider不同的是,它是通过手势滑动标尺得到取值,而不是通过滑动滑块本身. 效果图场景当一屏显示不下,例如年龄体重选择,金额选择等大区间需要的选择器,相比自带的picker要直观一些. 思路: 先画一个scrollView 2 装进canvas lineTo画刻度线段,lineTo+fill画出三角形游标,fillText描绘文本标签通过bindscroll监听刻度尺触摸事件渲染取值到页面基本布局 <scroll-view scroll-x="true"
微信小程序向左滑动删除功能的实现

微信小程序向左滑动删除功能的实现实现效果图: 实现代码: 1.wxml touch-item元素绑定了bindtouchstart.bindtouchmove事件 <view class="container"> <view class="touch-item {{item.isTouchMove ? 'touch-move-active' : ''}}" data-index="{{index}}" bindtouchst
微信小程序实现添加手机联系人功能示例

本文实例讲述了微信小程序实现添加手机联系人功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 1)WXML文件 <view bindlongtap="phoneNumTap">{{phoneNum}}</view> 2)JS文件 Page({ data:{ phoneNum:'12345678901'//测试用的号码,并非真实号码 }, // 长按号码响应函数 phoneNumTap:function(){ var that=this; //
微信小程序实现的自定义分享功能示例

本文实例讲述了微信小程序实现的自定义分享功能.分享给大家供大家参考,具体如下: 大家都知道,小程序有分享的功能,可以分享整个程序,也可以自定义分享的内容 onShareAppMessage 在 Page 中定义 onShareAppMessage 函数,设置该页面的分享信息. 只有定义了此事件处理函数,右上角菜单才会显示"分享"按钮用户点击分享按钮的时候会调用此事件需要 return 一个 Object,用于自定义分享内容示例代码: Page({ onShareAppMessag

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

前言

功能实现

总结

相关推荐

随机推荐