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