IT俱乐部 JavaScript uni-app 滚动到指定位置的操作方法

uni-app 滚动到指定位置的操作方法

方法1:使用标签,可以将页面横向(或纵向)滚动到指定位置
无法滚动 将代码放在setTimeout,nextTick里执行

			
					{{item.name}}
				
data(){
return {
servicesLeftList:[],
scrollLeftTop:0,,//滚动位置
activeLeftTab:"" //选中的样式
}
}
getData() {
	//接口
	getServicesTree().then(res => {
		this.servicesLeftList= res.data
		res.data.forEach((item, ind) => {
				setTimeout(()=>{
					uni.createSelectorQuery().in(this).select('#scroll' + item.id)
						.boundingClientRect(res => {
							scrollLeftTop.value = 65 * ind; // 设置滚动条距离左侧的距离    				        
						}).exec()
				},100)
		})
	})
}

方法二 使用uni.pageScrollTo 使页面纵向滚到到指定位置
建议设置height为auto :height:auto

					{{item.name}}
				
//方法
uni.pageScrollTo({
	scrollTop: 0,
	duration: 500
});

方法三 用scroll-view描点

 //左边 :scroll-top="scrollLeftTop"

		{{item.name}}
	
//方法
data(){
	retrun {
		tracingLeftPoint:"",//描点id
	}
}
	getData() {
	//接口
		getServicesTree().then(res => {
			this.servicesLeftList= res.data
			res.data.forEach((item, ind) => {
					setTimeout(()=>{
						this.tracingLeftPoint= 'scroll' + item.id
					},200)
			})
		})
	}

到此这篇关于uni-app 滚动到指定位置的文章就介绍到这了,更多相关uni-app 滚动到指定位置内容请搜索IT俱乐部以前的文章或继续浏览下面的相关文章希望大家以后多多支持IT俱乐部!

本文收集自网络,不代表IT俱乐部立场,转载请注明出处。https://www.2it.club/navsub/js/11032.html
上一篇
下一篇
联系我们

联系我们

在线咨询: QQ交谈

邮箱: 1120393934@qq.com

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

返回顶部