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()
相关推荐
赵庆明老师1 小时前
Uniapp微信小程序开发:http请求封装。
http·微信小程序·uni-app
雪芽蓝域zzs1 小时前
uniapp AES 加密解密
开发语言·uni-app·c#
我是高手高手高高手1 小时前
uni-app x 左右滑动效果
uni-app
灵感__idea3 小时前
Hello 算法:让前端人真正理解算法
前端·javascript·算法
向葭奔赴♡4 小时前
CSS是什么?—— 网页的“化妆师”
前端·css
黑犬mo4 小时前
在Edge、Chrome浏览器上安装uBlock Origin插件
前端·edge
excel4 小时前
🧩 Vue 3 watch 源码详解(含完整注释)
前端·javascript·vue.js
大前端helloworld4 小时前
前端梳理体系从常问问题去完善-网络篇
前端·面试
excel4 小时前
🌿 一文看懂 Vue 3 的 watch 源码:从原理到流程
前端
繁依Fanyi5 小时前
让工具说话:我在 Inspira Board 里用 AI 把“能用、好用、可复用”落成了日常
前端