vue 滑动到指定位置
在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 滑动到指定位置的更多相关文章
- RecyclerView滑动到指定位置,并置顶
一般我们用 mRecycleview.smoothScrollToPosition(0)滑动到顶部,具有滚动效果,但是如果我们想滚动到任意指定位置,那么smoothScrollToPosition() ...
- jquery实现点击按钮滑动到指定位置
<body> <script type="text/javascript"> function click_scroll() { var scroll_of ...
- 鼠标滑动到指定位置时div固定在头部
$(function(){ $(window).scroll(function () { if ($(window).scrollTop() > 253) { ...
- Android RecyView 滑动置指定位置
1,直接回到顶部 recyview.getLinearLayoutManager().scrollToPositionWithOffset(0, 0); 2,慢慢的回到顶部 private void ...
- JQuery滑动到指定位置
$('html, body').animate({ scrollTop: next_tip.offset().top + "px"},500);
- 横向滑动的HorizontalListView滑动指定位置的解决方法
项目中用到了自定义横向滑动的控件:HorizontalListView,点击其中一项,跳转到另外一个大图界面,大图界面也是HorizontalListView,想使用setSelection方法设定 ...
- jQuery实现将div中滚动条滚动到指定位置的方法
1.JS代码: onload = function () { //初始化 scrollToLocation(); }; function scrollToLocation() { var mainCo ...
- RecyclerView跳转到指定位置的三种方式
自从android5.0推出RecyclerView以后,RecyclerView越来越受广大程序员的热爱了!大家都知道RecyclerView的出现目的是为了替代listview和ScrollVie ...
- Vue如何引入jquery实现平滑滚动到指定位置效果
在以往的做法里首选jquery的animate实现,但是Vue里并没有这个方法.如何在Vue项目中实现点击导航平滑滚动到指定位置,为了这效果我是快要崩溃了,上网查阅了很久发现并没有真正意义上解决这个问 ...
- uni-城市列表滑动组件,点击字母跳转到指定位置
本插件由博主自主开发,比uni插件市场的城市列表滑动组件性能好,且不会出现闪屏的情况. 通过计算城市列表的高度实现滚动到指定位置,使用了uni滚动到指定位置的api city-chooce为页面入口页 ...
随机推荐
- 不止ChatGPT,谷歌云 AI 方案早已厉兵秣马!
近日 ChatGPT 爆火,掀起热议,能聊天能写代码,还能写策划稿,AI 似乎已逐渐变得无所不能. 不过在 AI 对话上,谷歌早在17年就提出了 Dialogflow 这一AI对话平台.相比起 Cha ...
- Java 进阶P-3.1+P-3.2
记事本的例子 容器类有两个类型: 容器的类型 元素的类型 泛型容器类 泛型 泛型其实质就是将数据的类型参数化.通过为类.接口.及方法设置类型参数来定义泛型.泛型使一个类或一个方法可在多种不同类型的对象 ...
- Linux环境下:程序的链接, 装载和库[ELF文件详解]
编译过程拆解 预处理处理生成.i文件, .i文件还是源码文件 将所有的宏定义#define展开. 处理#if, #else, #endif等条件编译指令 处理#include, 原地插入文件 cpp ...
- ChatGPT 背后核心技术的白话版
本文是关于ChatGPT 背后核心技术实现的一个通俗白话版,不涉及到的AI具体实现的技术细节哦. 在编排上增加了一些分割,内容具体如下: LLMs(大型语言模型) 如果将ChatGPT比作是动物,它就 ...
- NetCoreWebApi3.0-------MiniProfiler使用教程
参考博客:ASP.NET Core WebAPI中的分析工具MiniProfiler - LamondLu - 博客园 (cnblogs.com) 注意事项: 1.不要盲目copy别人的代码 var ...
- Redis01 Redis详细介绍
参考:https://blog.csdn.net/u011863024/article/details/107476187 学习视频 redis官网 redis中文网 JAVA源码 1 sql的发展 ...
- 《Terraform 101 从入门到实践》 Terraform在公有云Azure上的应用
<Terraform 101 从入门到实践>这本小册在南瓜慢说官方网站和GitHub两个地方同步更新,书中的示例代码也是放在GitHub上,方便大家参考查看. 简介 Azure是微软的公有 ...
- 微信小程序【关于地址信息的接入以及自动选择当前位置】
在做收货地址的时候,通常会让用户填写或者打开地图选择收获地址,此时就需要用到微信提供的地址API,在使用地址API的时候需要注册对应的API,而且地址API会经常调整,需要关注官方公告,下面就是关于地 ...
- Java基础语法:运算符、包机制、JavaDoc
Java基础语法:运算符.包机制.JavaDoc 自增.自减.一元运算符:++.-- 例子:b = a++; -->先给b赋值,a再自增:b=a; a=a+1; b = ++a; -->a ...
- Vue 禁止按钮多次点击 重复提交数据(指令实现)
全局定义,方便调用 新建plugins.js export default { install (Vue) { // 防重复点击(指令实现) Vue.directive('preventReClick ...