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)
			})
		})
	}
相关推荐
ModyQyW9 小时前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
耶啵奶膘1 天前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
耶啵奶膘2 天前
uniapp——地图路线绘制map
uni-app
shadouqi2 天前
uniapp实现图片预览,懒加载,下拉刷新等
uni-app
走,带你去玩2 天前
uniapp 微信小程序水印
微信小程序·小程序·uni-app
菌菇汤2 天前
uni-app实现单选,多选也能搜索,勾选,选择,回显
前端·javascript·vue.js·微信小程序·uni-app·app
某公司摸鱼前端2 天前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
today喝咖啡了吗2 天前
uniapp项目中node_modules\sass\sass.dart.js的体积过大怎么处理
javascript·uni-app·sass
遗憾随她而去.2 天前
uniapp 中使用路由导航守卫,进行登录鉴权
前端·uni-app
牧杉-惊蛰2 天前
uniapp微信小程序css中background-image失效问题
css·微信小程序·uni-app