uniapp锚点点击-页面跳转

// 如下:
<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>	

点击元素后

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点点-页面

    2024-07-23 01:00:03       10 阅读
  2. uniapp怎么进行页面

    2024-07-23 01:00:03       21 阅读
  3. uniapp 页面通信上下级页面互传

    2024-07-23 01:00:03       30 阅读
  4. vue 路由到其他页面指定位置(点)

    2024-07-23 01:00:03       50 阅读
  5. uniapp页面如何传递及接收对象参数?

    2024-07-23 01:00:03       56 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-23 01:00:03       52 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-23 01:00:03       54 阅读
  3. 在Django里面运行非项目文件

    2024-07-23 01:00:03       45 阅读
  4. Python语言-面向对象

    2024-07-23 01:00:03       55 阅读

热门阅读

  1. 解决git 不同branch 下node_moudes不同步的问题

    2024-07-23 01:00:03       12 阅读
  2. LLaMA: 开源的大规模语言模型

    2024-07-23 01:00:03       15 阅读
  3. Docker 深度解析:从入门到精通

    2024-07-23 01:00:03       12 阅读
  4. Gradle任务动作:自定义构建流程的魔法棒

    2024-07-23 01:00:03       16 阅读
  5. HOW - 保证 WebSocket 持续正常连接

    2024-07-23 01:00:03       14 阅读
  6. Sqlmap中文使用手册 - Techniques模块参数使用

    2024-07-23 01:00:03       17 阅读
  7. CF1152C Neko does Maths

    2024-07-23 01:00:03       17 阅读
  8. [技术总结] C++ 使用经验

    2024-07-23 01:00:03       17 阅读
  9. STL set

    2024-07-23 01:00:03       13 阅读
  10. 【Devops系统】如何构建Devops系统

    2024-07-23 01:00:03       16 阅读