在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事件的。

vue 滑动到指定位置的更多相关文章

  1. RecyclerView滑动到指定位置,并置顶

    一般我们用 mRecycleview.smoothScrollToPosition(0)滑动到顶部,具有滚动效果,但是如果我们想滚动到任意指定位置,那么smoothScrollToPosition() ...

  2. jquery实现点击按钮滑动到指定位置

    <body> <script type="text/javascript"> function click_scroll() { var scroll_of ...

  3. 鼠标滑动到指定位置时div固定在头部

    $(function(){ $(window).scroll(function () {            if ($(window).scrollTop() > 253) {       ...

  4. Android RecyView 滑动置指定位置

    1,直接回到顶部 recyview.getLinearLayoutManager().scrollToPositionWithOffset(0, 0); 2,慢慢的回到顶部 private void ...

  5. JQuery滑动到指定位置

    $('html, body').animate({ scrollTop: next_tip.offset().top + "px"},500);

  6. 横向滑动的HorizontalListView滑动指定位置的解决方法

    项目中用到了自定义横向滑动的控件:HorizontalListView,点击其中一项,跳转到另外一个大图界面,大图界面也是HorizontalListView,想使用setSelection方法设定 ...

  7. jQuery实现将div中滚动条滚动到指定位置的方法

    1.JS代码: onload = function () { //初始化 scrollToLocation(); }; function scrollToLocation() { var mainCo ...

  8. RecyclerView跳转到指定位置的三种方式

    自从android5.0推出RecyclerView以后,RecyclerView越来越受广大程序员的热爱了!大家都知道RecyclerView的出现目的是为了替代listview和ScrollVie ...

  9. Vue如何引入jquery实现平滑滚动到指定位置效果

    在以往的做法里首选jquery的animate实现,但是Vue里并没有这个方法.如何在Vue项目中实现点击导航平滑滚动到指定位置,为了这效果我是快要崩溃了,上网查阅了很久发现并没有真正意义上解决这个问 ...

  10. uni-城市列表滑动组件,点击字母跳转到指定位置

    本插件由博主自主开发,比uni插件市场的城市列表滑动组件性能好,且不会出现闪屏的情况. 通过计算城市列表的高度实现滚动到指定位置,使用了uni滚动到指定位置的api city-chooce为页面入口页 ...

随机推荐

  1. 特殊input框需求,粘贴文字或者扫码筛选检查后加密为password格式,否则正常显示/假如用户输入的信息是以mima开头,就切换输入框为密码类型

    1.angular8粘贴文字或者扫码筛选检查后加密为password格式,否则正常显示 <input [type]="myInputType" (keyup.enter)=& ...

  2. TypeDB Forces 2023 (Div. 1 + Div. 2, Rated, Prizes!) A-E

    比赛链接 A 题意 给一个正整数 \(n\) ,找到一组正整数 \(x,y \leq n\) ,满足 \(x^y \cdot y + y^x \cdot x = n\) . 题解 知识点:数学. 尝试 ...

  3. Django框架之drf:7、认证组件,权限组件,频率组件,过滤的多种用法,排序,分页,

    Django框架之drf 一.认证组件 简介: ​ 登录认证的限制 ​ 认证组件是drf框架给我们提供的认证接口,它能够在请求进入视图函数/类前进验证(例如:认证用户是否登录),对不符合认证的请求进行 ...

  4. Vue29 $nextTick

    https://www.jianshu.com/p/f1906903b609 1 介绍 Vue 在修改数据之后,视图不会立即更新,而是等待同一事件循环中的所有数据变化完成之后,再统一进行视图更新.而 ...

  5. JAVA虚拟机23---JAVA与线程

    1 线程简介 线程是比进程更轻量级的调度执行单位,线程的引入,可以把一个进程的资源分配和执行调度分开,各个线程既可以共享进程资源(内存地址.文件I/O等),又可以独立调度 目前线程是Java里面进行处 ...

  6. (原创)【B4A】一步一步入门03:APP名称、图标等信息修改

    一.前言 上篇 (原创)[B4A]一步一步入门02:可视化界面设计器.控件的使用 中我们已经了解了B4A程序的基本框架,现在我们还进一步讲解. 本篇文章会讲解如何修改APP的名称.图标等信息,以让一个 ...

  7. 为K8S集群准备Ceph存储

    随着K8S存储接口逐渐成熟并顺势推出CSI接口规范后,原来"in-tree"(树内)模式的很多存储插件也逐步迁移到了"out-of-tree"(树外)模式的CS ...

  8. try...catch中finally子句的使用

    目录: finally的使用 finally面试题 final.finally.finalize的区别 finally子句的使用: 1.在finally子句中的代码是最后且一定会执行的,即使try语句 ...

  9. flutter系列之:在flutter中使用导航Navigator

    目录 简介 flutter中的Navigator Navigator的使用 总结 简介 一个APP如果没有页面跳转那么是没有灵魂的,页面跳转的一个常用说法就是Navigator,flutter作为一个 ...

  10. 快速上手vue前端存储库、全局状态管理工具pinia

    pinia是什么,为什么我们要使用pinia? pinia是vue全局状态管理工具,类似vueX,用于全局的数据状态存储.修改变更等等 相较于vueX,pinia的使用较为简单,轻量级,上手容易,干掉 ...