uniapp 滚动到指定元素的位置(锚点)

需求:在页面中,不管位于何处,点击按钮页面滚动到对应的标题位置。

最简单有效的方式(直接复制改数据就行)

使用  scroll-view 标签的属性:scroll-top(距离值 num) 或 scroll-into-view(子元素的id,不能以数字开头 string);


            你渲染的内容

点击事件(位置随便写,根据页面需求)

{{item.name}}

需要滚动到的地方(使用动态id)

{{item.name}}

事件

filterList(id) {
	uni.createSelectorQuery().select('#' + id).boundingClientRect(function(rect){
			 // 使用scrollIntoView方法滚动到目标元素
				 uni.pageScrollTo({
				    scrollTop: rect.top - 70,
				    duration: 300
				  })
				}).exec();
	},

 总体思路:

1.使用scroll-view 标签,并配置;

2.点击事件获取想要的id;

3.设置滚动距离,时长

你可能感兴趣的:(uni-app)