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为页面入口页 ...
随机推荐
- Odoo View 常用技巧
隐藏Field <field name="currency_id" invisible="True"/> <field name=" ...
- SpringMVC学习笔记 - 第二章 - SSM整合案例 - 技术整合、统一结果封装、统一异常处理、前后联调、拦截器
[前置内容]Spring 学习笔记全系列传送门: Spring学习笔记 - 第一章 - IoC(控制反转).IoC容器.Bean的实例化与生命周期.DI(依赖注入) Spring学习笔记 - 第二章 ...
- Python从零到壹丨图像增强及运算:图像掩膜直方图和HS直方图
摘要:本章主要讲解图像直方图相关知识点,包括掩膜直方图和HS直方图,并通过直方图判断黑夜与白天,通过案例分享直方图的实际应用. 本文分享自华为云社区<[Python从零到壹] 五十二.图像增强及 ...
- ffmpeg拉取rtsp视频流
公司项目需要提供实时显示网络摄像头实时视频. void RTSPFFmpeg::rtsp_open(const char *url) { AVFormatContext* format_ctx = a ...
- FAQ selenium无法click的一个案例分享(1)
案例描述 http://sahitest.com/demo/php/fileUpload.htm 来自助教咨询 点击网页的第一个选择文件,如图 示例代码 from selenium import w ...
- python学习第五周总结
面向对象前戏之人狗大战 # 编写代码简单的实现人打狗 狗咬人的小游戏(剧情需要) """推导步骤1:代码定义出人和狗""" person1 ...
- docker03-常用命令
1.docker基础命令 1.1docker启动 指令:service docker start 1.2查看状态 指令:service docker status 1.3重启docker 指令:ser ...
- layui富文本的使用注意事项以及拓展
一.引入layui.js文件 二.初始化编辑器 PS:layedit.set({}) 方法必须要在初始化编辑器之前 var editIndex, layedit, layer; $(function ...
- 读写wav格式文件
读写wav格式文件 本文所有相关代码(包括未来的)均可在该代码库找到 https://gitcode.net/PeaZomboss/learnaudios 本文代码在MinGW-w64 gcc/g++ ...
- Spring框架-IoC核心
spring框架(spring全家桶) spring FrameWork springBoot+springCloud+springCloud Data Flow 一:spring的两大核心机制: I ...