uniapp 页面滚动到指定位置的方法

方法一:使用uni.pageScrollTo 使页面纵向滚到到指定位置
复制代码
uni.pageScrollTo({
	scrollTop: 0,
	duration: 300
});

如果滚动无效,可以尝试将代码放在settimeOut(异步),或者nextTick(微任务)。若仍滚动无效,可以将html为外层的盒子高度设置为 height:auto!important;

方法二:使用<scroll-view>标签,可以将页面横向(或纵向)滚动到指定位置

html

html 复制代码
<scroll-view scroll-x="true" class="scrollSku" :scroll-left="scrollLeft">
		<view v-for="(item,index) in data" :key="item.id" :id="'target'+index">
		</view>
</scroll-view>
复制代码
changeScroll(index) {
	uni.createSelectorQuery().in(this).select('#target' + index)
		.boundingClientRect(res => {
	   let left = res.left < 0 ? res.left + 20 : res.left - 20
	   this.scrollLeft = left; // 设置滚动条距离左侧的距离    				        
   }).exec();
},
相关推荐
爱喝白开水a7 小时前
前端AI自动化测试:brower-use调研让大模型帮你做网页交互与测试
前端·人工智能·大模型·prompt·交互·agent·rag
Never_Satisfied7 小时前
在JavaScript / HTML中,关于querySelectorAll方法
开发语言·javascript·html
董世昌417 小时前
深度解析ES6 Set与Map:相同点、核心差异及实战选型
前端·javascript·es6
WeiXiao_Hyy7 小时前
成为 Top 1% 的工程师
java·开发语言·javascript·经验分享·后端
吃杠碰小鸡8 小时前
高中数学-数列-导数证明
前端·数学·算法
kingwebo'sZone8 小时前
C#使用Aspose.Words把 word转成图片
前端·c#·word
xjt_09018 小时前
基于 Vue 3 构建企业级 Web Components 组件库
前端·javascript·vue.js
游戏开发爱好者88 小时前
日常开发与测试的 App 测试方法、查看设备状态、实时日志、应用数据
android·ios·小程序·https·uni-app·iphone·webview
我是伪码农8 小时前
Vue 2.3
前端·javascript·vue.js
夜郎king9 小时前
HTML5 SVG 实现日出日落动画与实时天气可视化
前端·html5·svg 日出日落