在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. 记一次CVE实战挖掘记录

    CVE实战挖掘记录 前一段时间在学习代码审计,然后为了学习就开始在github上面找开源的项目进行练手学习代码审计,这样就可以获取CVE编号. 0x01 cve编号获取流程 首先登录CVE官方网站,选 ...

  2. 【Django drf】视图类APIView之五层封装 ApiView的类属性 drf配置文件

    目录 ApiView的类属性 drf 配置文件之查找顺序 drf之请求 APIView之请求相关配置 drf之响应 APIView之响应相关配置 Response对象属性 视图类 序列化类 路由 基于 ...

  3. Jenkins CLI命令行

    Jenkins CLI命令行 jenkins不光可以UI操作还提供了命令行接口 位置 首页->系统管理->工具和动作->Jenkins 命令行接口 在这个界面下载一个jenkins- ...

  4. 【unity萌新第一步】Unity的Hello World(适合小白)

    Unity萌新的第一步:使用unity写第一个Hello World IT界有个笑话:"我擅长用各种语言写Hello World".我讲这个笑话的目的是,指出:写一个HelloWo ...

  5. python导入和导出excel,以文件流形式返回前端

    一.导入excel 1. 安装依赖包 pip install xlrd 2. 读取excel getColIndex(colList:list,colName:str): try: return co ...

  6. ‘mongo‘不是内部或外部命令,也不是可运行的程序或批处理文件

    出现问题原因: MongoDB环境变量未配置 解决办法: 1)右击我的电脑-->属性,进入系统属性界面,点击如下图所示位置的[高级系统设置],在弹窗的[系统属性]的[高级]选项卡右下角点击[环境 ...

  7. VMwarestation安装centos系统

    上机实验1 1.软硬件准备 软件:推荐使用vmware 镜像:centos7下载网址https://mirror.iscas.ac.cn/centos/7/isos/x86_64/ 这个镜像网址实测比 ...

  8. 硬件协议之uart

    1. 常规状态下,高电平 2. Start位, 低电平 3. 数据信号次序LSB,  即bit0最先传输,   低电平代表0, 高电平代表1 4. Stop位,  高电平 由此可见传送一个字节,需要1 ...

  9. qt元对象系统之 Q_OBJECT宏

    宏展开是这样 #define Q_OBJECT \ public: \ QT_WARNING_PUSH \ Q_OBJECT_NO_OVERRIDE_WARNING \ static const QM ...

  10. ABAP 辨析ON INPUT|REQUEST|CHAIN-INPUT|CHAIN-REQUEST

    1.逻辑流 在屏幕开发中,存在如下逻辑流: PBO(Process Before Output):屏幕输出之前触发 PAI(Process After Input):用户在屏幕中执行操作触发 POH( ...