uniapp 锚点跳转

页面1:

跳转页面:

html 复制代码
<template>
	<view class="content">
		<view class="test test1">1111111111111</view>
        <view id="box2222" class="test test2">22222222222222</view>
	</view>
</template>

<script setup>
	import { ref, onMounted } from 'vue'
	
	onMounted(() => {
			// 获取路由参数
            //所有路由
			const pages = getCurrentPages()
            //当前跳转的路由(跳转页)
			const currentPage = pages[pages.length - 1]
            //需要跳转的位置
			const scrollTo = currentPage.options.scrollTo
			
			if (scrollTo) {
				// 延迟执行滚动,确保DOM已经渲染完成
				setTimeout(() => {
					// 使用uni-app的选择器API,兼容各平台
					const query = uni.createSelectorQuery().in(currentPage)
					query.select('#' + scrollTo).boundingClientRect()
					query.exec((res) => {
						if (res && res[0]) {
							// 获取元素位置并滚动
							const { top } = res[0]
							uni.pageScrollTo({
								scrollTop: top,
								duration: 300
							})
						}
					})
				}, 100)
			}
		})
</script>

<style lang="scss" scoped>
	.test{
        width: 100%;
        height:1200rpx ;
        background: green;
    }
</style>
相关推荐
2501_9160074719 小时前
深入理解HTTPS对称与非对称加密机制及Charles抓包实践
网络协议·http·ios·小程序·https·uni-app·iphone
小徐_233319 小时前
AI 写 wot-ui 总在猜 API?我们把 Skills、MCP 和 CLI 都配好了
前端·uni-app·ai编程
Liu.77420 小时前
uni-app 组件 uni-easyinput 常见 Bug 及解决方案
uni-app·bug
小徐_23331 天前
uni-app 项目别再从零搭了!3 个 Wot UI 起手模板怎么选?
前端·uni-app
蜡台1 天前
uniapp pdf文件预览组件
pdf·uni-app·合同·pdfh5
凡泰AI2 天前
如何借助MCP打通企业APP内部服务:从统一调用到小程序承接
小程序·uni-app·app·mpaas·mcp·小程序容器
华玥作者2 天前
uniapp 万条数据不卡顿:我写了个虚拟列表组件 hy-list,原生支持瀑布流
数据结构·uni-app·list·vue3
这是个栗子2 天前
uni-app 微信小程序开发:常用函数总结(一)
微信小程序·小程序·uni-app·getcurrentpages
宠友信息3 天前
消息序号如何保证即时通讯源码聊天记录稳定加载
java·spring boot·redis·python·mysql·uni-app
2501_916008894 天前
苹果上架工具怎么选 不用 Mac 上架 App Store 的几种方案
android·macos·ios·小程序·uni-app·iphone·webview