使用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（节流）的方式来减少调用频率，同时又不影响实际效果。 

 

好了 结束。去试试吧~