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>
相关推荐
小恒恒1 天前
2025 Vibe Coding 有感
前端·uni-app·trae
一颗小青松1 天前
uniapp使用uni-im
uni-app
2501_916007471 天前
iPhone APP 性能测试怎么做,除了Instruments还有什么工具?
android·ios·小程序·https·uni-app·iphone·webview
2501_915106321 天前
Windows 环境下有哪些可用的 iOS 上架工具, iOS 上架工具的使用方式
android·ios·小程序·https·uni-app·iphone·webview
一颗小青松1 天前
uniapp vue3中app端使用腾讯云点播上传
uni-app·云计算·腾讯云
玄尺_0072 天前
uniapp h5端使浏览器弹出下载框
前端·javascript·uni-app
2501_915106322 天前
iOS 抓包工具有哪些?不同类型的抓包工具可以做什么
android·ios·小程序·https·uni-app·iphone·webview
web前端神器2 天前
vue、uniapp项目循环中能显示每个列表的内容,但是点击的时候传递的参数却不正确
uni-app
ModyQyW2 天前
HBuilderX 4.87 无法正常读取 macOS 环境配置的解决方案
前端·uni-app
脾气有点小暴2 天前
Uni-app App 端自定义导航栏完整实现指南
uni-app