咨询电话:
15628812133
09
2023/09

YonBuider之利用scroll-view组件实现锚链接(下)

发布时间:2023-09-09 17:49:18
发布者:MaiMai
浏览量:
0

上一章我们利用scroll-view组件的scroll-into-view属性实现了类似锚链接的功能。除了利用属性外,scroll-view组件还提供了一个scrollTo方法,使页面滚动到指定位置。可配置参数如下:

scrollTo方法的配置参数

可以看到参数view通过把值设置为某子元素id的方法跳转对应位置,实现思路与scroll-into-view属性是类似的。

DOM结构

DOM结构

我们需要通过document.getElementById获取到本页的scroll-view元素。当点击右侧首字母时,将子元素id传给scrollTo方法的view参数。

方法实现

这样便可以成功实现页面位置的跳转了。

scroll-into-view属性和scrollTo方法都能够实现类似锚链接的页面位置跳转,区别就是使用scroll-into-view属性是直接跳转,而使用scrollTo方法会自带一个滚动的效果,可以通过animated参数来设置滚动是否带有动画,默认为true,如图:

效果图1

效果图2

可以按照自己所需来选择不同的实现方法。


关键词:
返回列表