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()
相关推荐
zhengxianyi5152 小时前
使用码云gitee登录ruoyi-vue-pro——坑比较多
前端·vue.js·gitee·ruoyi-vue-pro优化·三方登陆
光影少年2 小时前
React vs Next.js
前端·javascript·react.js
谢尔登2 小时前
Vue3 响应式系统——ref 和 reactive
前端·javascript·vue.js
天若有情6732 小时前
【JavaScript】React 实现 Vue 的 watch 和 computed 详解
javascript·vue.js·react.js
OEC小胖胖2 小时前
16|总复习:把前 15 章串成一张 React 源码主线地图
前端·react.js·前端框架·react·开源库
董世昌412 小时前
HTTP协议中,GET和POST有什么区别?分别适用什么场景?
java·开发语言·前端
_OP_CHEN2 小时前
【前端开发之HTML】(二)HTML 常见标签(上):从入门到实战,搞定网页基础排版!
前端·css·html·前端开发·网页开发·html标签
满栀5852 小时前
插件轮播图制作
开发语言·前端·javascript·jquery
切糕师学AI2 小时前
Vue 中的计算属性(computed)
前端·javascript·vue.js
程琬清君2 小时前
Vue3DraggableResizable可移动范围有问题
前端·javascript·vue.js