uniapp锚点点击-页面跳转

javascript 复制代码
// 如下:
<template>
	<div id="home">
		<div v-for="(item, index) in list" :key="index" @click="onClick(item, index)">
			<div :id="'node' + index"></div>
		</div>
	</div>
</template>	

点击元素后

javascript 复制代码
const id = `#node${index}`

uni.createSelectorQuery().in(this).select(id).boundingClientRect((data) => {
   uni.createSelectorQuery().select('#home').boundingClientRect((res) => {
    // console.log('node', data.top)
    // console.log('home', res.top)
    uni.pageScrollTo({
      scrollTop: data.top - res.top - 200,
      duration: 300,
    })
  }).exec()
}).exec()
相关推荐
闲云一鹤2 分钟前
Cesium 去掉默认瓦片和地形,解决网络不好时地图加载缓慢的问题
前端·cesium
Dreamcatcher_AC3 分钟前
前端面试高频13问
前端·javascript·vue.js
AI陪跑3 分钟前
深入剖析:GrapesJS 中 addStyle() 导致拖放失效的问题
前端·javascript·react.js
登山人在路上5 分钟前
Vue中导出和导入
前端·javascript·vue.js
消失的旧时光-19437 分钟前
Flutter 路由从 Navigator 到 go_router:嵌套路由 / 登录守卫 / 深链一次讲透
前端·javascript·网络
掘金酱11 分钟前
🏆2025 AI/Vibe Coding 对我的影响 | 年终技术征文
前端·人工智能·后端
成为大佬先秃头13 分钟前
渐进式JavaScript框架:Vue
开发语言·javascript·vue.js
智算菩萨13 分钟前
【Python基础】字典(Dictionary):AI的“键值对”信息存储的基石
前端·人工智能·python
沐森19 分钟前
使用rust打开node的libuv实现多线程调用三种模式
javascript·rust
C_心欲无痕20 分钟前
vue3 - shallowReadonly浅层只读响应式对象
前端·javascript·vue.js