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()
相关推荐
孤城2862 分钟前
MAC电脑常用操作
前端·macos·快捷键·新手·电脑使用
木亦Sam3 分钟前
Vue DevTools逆向工程:自己实现一个组件热更新调试器
前端
酷酷的阿云3 分钟前
动画与过渡效果:UnoCSS内置动画库的实战应用
前端·css·typescript
dleei3 分钟前
使用docker创建gitlab仓库
前端·docker·gitlab
勤劳的代码小蜜蜂4 分钟前
大文件上传:告别传统传输瓶颈,让数据流转更高效
前端
前端大卫5 分钟前
Echarts 饼图的创新绘制技巧(附 Demo 和源码)
前端·javascript·echarts
wiedereshen5 分钟前
Vue学习记录(十) --- Vue3综合应用
前端
展信佳_daydayup7 分钟前
Vue3项目部署到服务器
前端
LanceJiang9 分钟前
前端检测版本更新-Worker 项目实践
前端
月光冷青衫11 分钟前
uniapp-微信小程序-map组件-自定义marker
前端