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()
相关推荐
老华带你飞13 小时前
茶叶商城|基于SprinBoot+vue的茶叶商城系统(源码+数据库+文档)
java·前端·javascript·数据库·vue.js·spring boot
烛阴13 小时前
不只是Public与Private:C#访问修饰符全方位解读
前端·c#
涔溪13 小时前
Vue3常用的组合式API 超详细讲解
前端·javascript·vue.js
秋邱13 小时前
AR + 离线 AI 实战:YOLOv9+TensorFlow Lite 实现移动端垃圾分类识别
开发语言·前端·数据库·人工智能·python·html
蜡笔小嘟13 小时前
使用gemini 3 pro实现可视化大屏
前端·ai·gemini·gemini3peo
马玉霞13 小时前
vue3很丝滑的table表格向上滚动效果,多用于统计页面
前端·vue.js
用户9520816117913 小时前
百度地图JSAPI THREE Label 组件使用指南,轻松实现地图标签渲染
前端
SVIP1115913 小时前
webpack入门 精细版
前端·webpack·node.js
畅畅畅哥哥13 小时前
Next.js App Router 实战避坑:状态、缓存与测试
前端·前端框架
一水鉴天13 小时前
整体设计 定稿 之20 拼语言表述体系之3 dashboard.html完整代码
java·前端·javascript