uni-app 滚动到指定位置

方法1:使用标签,可以将页面横向(或纵向)滚动到指定位置

无法滚动 将代码放在setTimeout,nextTick里执行

javascript 复制代码
<!-- 左边 -->
			<scroll-view show-scrollbar="false" scroll-y="true" class="left-box"
				:scroll-top="scrollLeftTop" scroll-with-animation="true">
				<view class="scroll-view-item" v-for="(item,index) in servicesLeftList" :key="item.id"
					:id="'scroll' + activeLeftTab" :class="{'active':activeLeftTab==item.id}">
					{{item.name}}
				</view>
			</scroll-view>
javascript 复制代码
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

javascript 复制代码
<view class="left-box" >
				<view class="scroll-view-item" v-for="(item,index) in servicesLeftList" :key="item.id"
					 :class="{'active':activeLeftTab==item.id}">
					{{item.name}}
				</view>
			</view>
//方法
uni.pageScrollTo({
	scrollTop: 0,
	duration: 500
});

方法三 用scroll-view描点

javascript 复制代码
 //左边 :scroll-top="scrollLeftTop"
<scroll-view scroll-y="true" class="left-box" scroll-with-animation="true"
	:scroll-into-view="tracingLeftPoint">
	<view class="scroll-view-item" v-for="(item,index) in servicesLeftList" :key="item.id"
		:id="'scroll' + item.id" :class="{'active':activeLeftTab==item.id}">
		{{item.name}}
	</view>
</scroll-view>

//方法

data(){
	retrun {
		tracingLeftPoint:"",//描点id
	}
}


	getData() {
	//接口
		getServicesTree().then(res => {
			this.servicesLeftList= res.data
			res.data.forEach((item, ind) => {
					setTimeout(()=>{
						this.tracingLeftPoint= 'scroll' + item.id
					},200)
			})
		})
	}
相关推荐
2501_915918419 小时前
掌握 iOS 26 App 运行状况,多工具协作下的监控策略
android·ios·小程序·https·uni-app·iphone·webview
知识分享小能手10 小时前
uni-app 入门学习教程,从入门到精通,uni-app基础扩展 —— 详细知识点与案例(3)
vue.js·学习·ui·微信小程序·小程序·uni-app·编程
2501_9159090612 小时前
iOS 混淆实战,多工具组合完成 IPA 混淆与加固(源码 + 成品 + 运维一体化方案)
android·运维·ios·小程序·uni-app·iphone·webview
赵庆明老师13 小时前
Uniapp微信小程序开发:EF Core 中级联删除
uni-app
Javashop_jjj14 小时前
三勾软件| 用SpringBoot+Element-UI+UniApp+Redis+MySQL打造的点餐连锁系统
spring boot·ui·uni-app
Q_Q51100828521 小时前
python+uniapp基于微信小程序的心理咨询信息系统
spring boot·python·微信小程序·django·flask·uni-app·node.js
HuYi_code1 天前
WeChat 小程序下载文件实现
微信小程序·uni-app
00后程序员张1 天前
HTTPS 包 抓取与分析实战,从抓包到解密、故障定位与真机取证
网络协议·http·ios·小程序·https·uni-app·iphone
2501_915921431 天前
iOS混淆与IPA加固实战手记,如何构建苹果应用防反编译体系
android·macos·ios·小程序·uni-app·cocoa·iphone
Q_Q5110082851 天前
python+uniapp基于微信小程序的学院设备报修系统
spring boot·python·微信小程序·django·flask·uni-app