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()
相关推荐
IMPYLH几秒前
HTML 的 <main> 元素
前端·html
深念Y2 分钟前
微服务抽取路线图:从胖单体到 ARM 集群
前端·arm开发·数据库·后端·微服务·云原生·架构
阮小贰13 分钟前
干支编码的确定性实现:节气切分 + 1000 条溯源断语(附 JS 源码)
开发语言·javascript·ecmascript
雪芽蓝域zzs19 分钟前
Vue3 + Vite本地模拟数据(读取 JSON 数据)
前端
亿元程序员21 分钟前
还有高手?用Shader让图片中的3D圆环转起来!
前端
灯澜忆梦23 分钟前
【基于GO的Web开发14】gin请求重定向
前端·后端·golang·gin
qq_4523962324 分钟前
第十一篇:《前端性能优化体系:从加载到交互的全链路》
前端·性能优化·交互
Mh27 分钟前
听说我兄弟喜欢跑车,所以必须安排上
前端·javascript·vue.js
zttbee28 分钟前
vue学习(白话功能版)
前端·vue.js·学习·前端框架
qq_4260039629 分钟前
多语言新增语种全量测试策略
前端·javascript·python·pycharm·自动化