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>
相关推荐
RuoyiOffice5 小时前
企业请假销假系统设计实战:一张表、一套流程、两段生命周期——BPM节点驱动的表单变形术
java·spring·uni-app·vue·产品运营·ruoyi·anti-design-vue
KongHen026 小时前
uniapp-x实现自定义tabbar
前端·javascript·uni-app·unix
RuoyiOffice10 小时前
SpringBoot+Vue3+Uniapp实现PC+APP双端考勤打卡设计:GPS围栏/内网双模打卡、节假日方案、定时预生成——附数据结构和核心源码讲解
java·spring·小程序·uni-app·vue·产品运营·ruoyi
2501_9159214313 小时前
2026 iOS 上架新趋势 iOS 发布流程模块化
android·ios·小程序·https·uni-app·iphone·webview
窝子面1 天前
uni-app的初体验
uni-app
笨笨狗吞噬者1 天前
【uniapp】微信小程序实现自定义 tabBar
前端·微信小程序·uni-app
雪芽蓝域zzs1 天前
uniapp MD5加密 加密传输 密码加密
uni-app
2501_915909061 天前
iOS 抓包不越狱,代理抓包 和 数据线直连抓包两种实现方式
android·ios·小程序·https·uni-app·iphone·webview
给钱,谢谢!1 天前
记录uni-app Vue3 慎用 Teleport,会导致页面栈混乱
前端·vue.js·uni-app
郑州光合科技余经理2 天前
海外O2O系统源码剖析:多语言、多货币架构设计与二次开发实践
java·开发语言·前端·小程序·系统架构·uni-app·php