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为页面入口页 ...
随机推荐
- 记一次CVE实战挖掘记录
CVE实战挖掘记录 前一段时间在学习代码审计,然后为了学习就开始在github上面找开源的项目进行练手学习代码审计,这样就可以获取CVE编号. 0x01 cve编号获取流程 首先登录CVE官方网站,选 ...
- 【Django drf】视图类APIView之五层封装 ApiView的类属性 drf配置文件
目录 ApiView的类属性 drf 配置文件之查找顺序 drf之请求 APIView之请求相关配置 drf之响应 APIView之响应相关配置 Response对象属性 视图类 序列化类 路由 基于 ...
- Jenkins CLI命令行
Jenkins CLI命令行 jenkins不光可以UI操作还提供了命令行接口 位置 首页->系统管理->工具和动作->Jenkins 命令行接口 在这个界面下载一个jenkins- ...
- 【unity萌新第一步】Unity的Hello World(适合小白)
Unity萌新的第一步:使用unity写第一个Hello World IT界有个笑话:"我擅长用各种语言写Hello World".我讲这个笑话的目的是,指出:写一个HelloWo ...
- python导入和导出excel,以文件流形式返回前端
一.导入excel 1. 安装依赖包 pip install xlrd 2. 读取excel getColIndex(colList:list,colName:str): try: return co ...
- ‘mongo‘不是内部或外部命令,也不是可运行的程序或批处理文件
出现问题原因: MongoDB环境变量未配置 解决办法: 1)右击我的电脑-->属性,进入系统属性界面,点击如下图所示位置的[高级系统设置],在弹窗的[系统属性]的[高级]选项卡右下角点击[环境 ...
- VMwarestation安装centos系统
上机实验1 1.软硬件准备 软件:推荐使用vmware 镜像:centos7下载网址https://mirror.iscas.ac.cn/centos/7/isos/x86_64/ 这个镜像网址实测比 ...
- 硬件协议之uart
1. 常规状态下,高电平 2. Start位, 低电平 3. 数据信号次序LSB, 即bit0最先传输, 低电平代表0, 高电平代表1 4. Stop位, 高电平 由此可见传送一个字节,需要1 ...
- qt元对象系统之 Q_OBJECT宏
宏展开是这样 #define Q_OBJECT \ public: \ QT_WARNING_PUSH \ Q_OBJECT_NO_OVERRIDE_WARNING \ static const QM ...
- ABAP 辨析ON INPUT|REQUEST|CHAIN-INPUT|CHAIN-REQUEST
1.逻辑流 在屏幕开发中,存在如下逻辑流: PBO(Process Before Output):屏幕输出之前触发 PAI(Process After Input):用户在屏幕中执行操作触发 POH( ...