当前位置: 首页 > news >正文

uniapp 跳转到指定位置

this.$router.push({name: 'Demo',params: {id: '123'}
})

这样就实现了页面的跳转,并且将参数id传递给了Demo组件。

如果需要跳转到当前页面的不同位置,我们可以使用锚点来实现。锚点是一个HTML元素的标识符,可以用于定位和跳转到该元素。例如,我们可以在页面中添加一个id为anchor的元素,并给它一个具有唯一性的标识符。

<div id="anchor"></div>

然后,在跳转时,我们可以在跳转URL中添加#anchor的片段标识符,来实现跳转到该元素。

this.$router.push('/pages/demo/123#anchor')

这样就可以跳转到Demo组件中id为anchor的元素位置。

除了使用锚点,UniApp还提供了一些其他的方法来实现页面的定位。例如,我们可以在组件的created生命周期中,通过获取元素的offsetTop来实现页面的定位。

created() {this.$nextTick(() => {let target = document.getElementById('anchor')let scrollTop = target.offsetTopdocument.documentElement.scrollTop = scrollTopdocument.body.scrollTop = scrollTop})
}

这样就可以在该页面加载完成时自动跳转到指定位置

http://www.lryc.cn/news/190894.html

相关文章:

  • 基于java的图书馆预约座位系统的设计与实现(部署+源码+LW)
  • golang 拉取 bitbucket.org 私有库
  • Sub-1G射频收发器soc芯片 UM2080F32 低功耗 32 位 IoTP
  • 国际减灾日 | 智慧减灾——百分点科技的数据科学视角
  • ChatGLM流式输出的报错修复
  • HDLbits: ece241 2013 q12 // Exams/m2014 q4k
  • vue3模板-vscode设置(语法糖)
  • RFID超高频读写器的特点和应用
  • 诡异事件:开发的安卓摄像头应用突然不能保存图片,回滚代码都查不出来
  • validator库的使用详解
  • ADS版图中连接提示线设置
  • 【MySQL】内置函数——数学函数+其他函数
  • Ubuntu 23.10 Beta 镜像开放下载
  • mybatispagehelp嵌套分页处理
  • 增速波动!W「下」AR「上」!HUD前装供应商比拼硬核能力
  • XXE漏洞复现实操
  • github创建个人网页登录后404无法显示的问题
  • MySQL——源码安装教程(初版)
  • 1.1.C++项目:仿muduo库实现并发服务器之any类的设计
  • linux项目启动脚本start.sh和stop.sh停止脚本
  • Avalonia常用小控件Svg
  • 设计模式-行为型模式
  • 【EventLoop】问题一次搞定
  • Unity中Shader光照模型Phong
  • 消息队列缓存,以蓝牙消息服务为例
  • MSF派生给另外MSF,meterpreter派生给另外meterpreter,Metasploit
  • 【LeetCode】1.两数之和
  • 3. Windows下C++/MFC调用hiredis库操作redis示例
  • 200、使用默认 Exchange 实现 P2P 消息 之 消息生产者(发送消息) 和 消息消费者(消费消息)
  • SqlServer--get 和 post 请求 http接口