使用scrollview的scroll-into-view属性进行锚点定位

在小程序的开发中,我们经常会遇到点击或者切换 滚动列表查看的功能需求 只要使用锚点定位来就实现可以达到交互体验 先大概看一下ui图

 

  • 问题复现步骤:

  1. [第一步]
    打开这个商品选择列表,点击最上面的tab切换能定位到对应的锚点
  2. [第二步]
    滚动下面的内容 会根据相对应的内容对应切换更改tab 互相对应

功能实现

采用小程序视图容器组件实现:scroll-view    基于scroll-view实现锚点定位

首先导航栏也是根据后台返回拿到动态数据 可根据返回数据进行左右滑动  直接上图

竖向滚动时,scroll-view需要指定一个固定高度  ,给scroll-view要设置高度,必须设置上scroll-y或者scroll-x为true

贴一段如下代码  scroll-into-view 是 scroll-view 的一个属性,主要作用是用于滚动到指定元素的位置,其对应值是元素的id

这里scrollHeight是根据不同的机型的高度动态计算出来的(height不能使用百分百),scroll-view有个重要属性:scroll-into-view,它接收一个string值,即为滚动的锚点,

view子节点也设置相应的锚点列表:如上图的class=activepart节点中的id属性。这样我们的滚动就有了对应的关系了,在筛选块点击对应数据的时候,

toIndex变量设置成对应的数据,列表也会滚动到对应的位置。

当滚动内容列表的时候,tab的高亮切换项也需要对应切换,这时候就要根据
我们可以使用bindscroll:滚动列表的时候会触发此事件。不清楚的可以找官方文档 有说明

 

这里的anchorArray为所有锚点块所占页面高度的数组总和

每个锚点块都有一个固定的高度,我们在拿到数据渲染完页面后,可以通过
boundingClientRect方法拿到类名为activepart各个节点的高度,并将这些高度装进anchorArray数组中,

那么当我们滚动超过某块锚点高度之后,顶部tab选项也会随之对应的切换。

 

好了这就是全部的逻辑和实现的全过程

需要注意几个要点

1.scrollview必须设置宽度/高度(取决于是横向/竖向滚动)

2.scroll-into-view:值应为某子元素id。

3.id="{{item.id}}" 元素id(且id不能以数字开头)。

 

小tips:在进行窗口的resize、scroll,输入框内容校验等操作时,如果事件处理函数调用的频率无限制,会加重浏览器的负担,导致用户体验非常糟糕。

现在就会碰到滑动的频繁 此时我们可以采用debounce(防抖)和throttle(节流)的方式来减少调用频率,同时又不影响实际效果。 

 

好了 结束。去试试吧~

 

 

 

 

 

  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值