首页 > 其他分享 >vue 滑动到指定位置

vue 滑动到指定位置

时间:2022-08-23 17:49:24浏览次数:91  
标签:nextTick vue target 指定 滑动 targetbox 方法 document

在Vue中,有三种方式可以实现H5页面滑动至指定位置

方法1:

//先获取目标位置距离



mounted() {
  this.$nextTick(() => {
     setTimeout(() => {
        let targetbox= document.getElementById('targetbox');
        this.target= targetbox.offsetTop;
     })
  })
}
//再滑动指定距离
document.body.scrollTop = this.target;

方法2:

this.$nextTick(() => {
     this.$refs.DOM.scrollTo(0,200);
})

方法3:

document.getElementById("target").scrollIntoView();

避坑指南:

方法1,滑动至的元素不能是display:none,存在兼容问题,亲测在部分ios机子上document.body.scrollTop滑动无效。

方法2,未亲测过,但在this.$nextTick(()里执行滑动,感觉有点麻烦。

方法3,亲测可用,ios和android都可。只是要注意,如果页面有监听scroll事件,scrollIntoView也会触发scroll事件的。

标签:nextTick,vue,target,指定,滑动,targetbox,方法,document
From: https://www.cnblogs.com/web-simon/p/16617160.html

相关文章

  • VUE学习-自定义修饰符
    自定义修饰符组件constmyComponent={template:`<inputtype="text":value="modelValue"@input="emitValue"/>`,props:{modelValue:String,......
  • vue自定义指令的使用
    1、背景:想通过自定义指令v-hasHelp控制页面右上角是否出现帮助按钮,点击按钮可以跳转外部链接。用自定义指令的目的是方便。2、先在自己的项目中注册使用hasHelpindex.j......
  • vue 大屏等比缩放适配方法
    大屏适配方案之一,根据设计稿尺寸,固定容器尺寸,内容完全按设计稿大小开发,可保持比例居中显示。//windowScale.jsexportfunctionuseIndex(appRef,fill){//*appRef......
  • vue3支付后不允许跳转回预付订单页
    场景:在电商项目中,订单页通常是用来展示给用户看的,当支付完成后,就不允许回退回来,防止二次支付以及商品信息错乱曾使用:router.push(`/member/pay?orderId=${res.data.resul......
  • vue路由配置和拦截
    router.beforeEach()一般用来做一些进入页面的限制。比如是否是登录状态,若没有登录,就不能进入某些页面,只有登录成功后,才有权限查看某些页面,简单地说,就是通过vue的路由来实......
  • vue大文件上传插件选哪个好?
    ​4GB以上超大文件上传和断点续传服务器的实现随着视频网站和大数据应用的普及,特别是高清视频和4K视频应用的到来,超大文件上传已经成为了日常的基础应用需求。但是在很......
  • vue项目目录结构划分
     1.dist---编译之后的项目文件2.src---开发目录3.src/assets---静态资源src/assets/less---公共lesssrc/assets/img---图片资源4.src/components---组件5.src/pag......
  • 一天一个知识点-----vue项目简单引入svg
    项目背景:vue3.0+elementPlus注意项目结构,主要涉及的几个文件及文件夹---直接上代码----1.最开始是要下载包npminstallsvg-sprite-loader2.配置项目的配置文件vu......
  • vue3 单文件组件——父组件访问子组件的实例
    如果一个子组件使用的是选项式API 或没有使用 <scriptsetup>,被引用的组件实例和该子组件的 this 完全一致,这意味着父组件对子组件的每一个属性和方法都有完全的访问......
  • vue大文件上传组件选哪个好?
    ​一、概述 所谓断点续传,其实只是指下载,也就是要从文件已经下载的地方开始继续下载。在以前版本的HTTP协议是不支持断点的,HTTP/1.1开始就支持了。一般断点下载时才用到......