vue 根据div id 滚动到指定view到可视视图中
<div id="name" @click="scrollToViewById('name')"> ...... </div>
scrollToViewById(id) {
if (id == '') {
return
}
this.$nextTick(() => {
document.getElementById(id).scrollIntoView({
behavior: "smooth", // 平滑过渡
block: 'start' // start 上边框 center 中间 end 底部边框 与视窗顶部平齐
});
})
},
vue 根据div id 滚动到指定view到可视视图中的更多相关文章
- vue 点击元素滚动到指定位置（滑动到指定位置对应标签自动选中）
一:各个模块不相同情况 1.内容部分<div class="anchor"> <div v-for="(item,index) in anchors&q ...
- Change Field Layout and Visibility in a List View 在列表视图中更改字段布局和可见性
This lesson will guide you through the steps needed to select columns displayed in the List View. Fo ...
- DIV滚动条滚动到指定位置（jquery的position()与offset()方法区别小记）
相对浏览器,将指定div滚到到指定位置,其用法如下 $("html,body").animate({scrollTop: $(obj).offset().top},speed); ...
- iOSCollectioView滚动到指定section的方法
CollectioView滚动到指定section的方法 项目中的需求:collectionView顶部有一个scrollView组成的标签,点击标签,让collectionView滚动到指定的行 ...
- vue项目接口管理,所有接口都在apis文件夹中统一管理
参考:https://www.codercto.com/a/53432.html 在vue开发中,会涉及到很多接口的处理,当项目足够大时,就需要定义规范统一的接口,如何定义呢? 方法可能不只一种,本文 ...
- Vue列表实现滚动到指定位置样式改变
这个需求大概是这样子: 我做的一个聊天Demo,在搜索框搜索用户,可以滚动到指定的用户.然后成选中状态. 这是目前状态,我搜索 南宫仆射 ,想要下面的用户列表直接滚动到 南宫仆射 并改变CSS样式. ...
- 滚动到指定元素的id处+当元素出现在浏览器显示区域就会自动加载
//滚动到指定元素的id处 如:$("#Exam82") function Jump() { var scroll_offset = $("#Exam82"). ...
- jQuery实现将div中滚动条滚动到指定位置的方法
1.JS代码: onload = function () { //初始化 scrollToLocation(); }; function scrollToLocation() { var mainCo ...
- Android CoordinatorLayout + AppBarLayout(向上滚动隐藏指定的View)
在新的Android Support Library里面,新增了CoordinatorLayout, AppBarLayout等. 实现的效果: 向下滚动RecylerView,Tab会被隐藏,向上滚 ...
- [Vue warn]: Attribute "id" is ignored on component <div> because the component is a fragment instanc
今天在使用vue框架搭建环境时,遇到这个错误提示: [Vue warn]: Attribute "id" is ignored on component <div> b ...
随机推荐
- 理解Node.js 的重要概念
Node.js是什么 Node.js是JavaScript的运行时(runtime),终于脱离了浏览器也能运行JavasScript了.同时,Node.js又暴露fs,http等对象给JS,使JS能够 ...
- Linux Mint操作系统安装
1,Linux 发行版 什么是Linux 发行版呢?这要从Linux 来源说起.Unix操作系统后期,开始收费和商业闭源了.一个叫Richard Stallman 的人就发起 GNU 计划,想模仿U ...
- MQTT协议介绍与Broker列表
MQTT协议介绍 MQTT是什么? MQTT 是基于 Publish/Subscribe(发布/订阅) 模式的物联网通信协议,凭借简单易实现.支持 QoS.报文小等特点. 官网:https://mqt ...
- Mysql的Innodb和MyISAM引擎的区别
区别项 Innodb MyISAM 事务 支持 不支持 锁粒度 行锁,适合高并发 表锁,不适合高并发 是否默认 默认 非默认 支持外键 支持外键 不支持 适合场景 读写均衡,写 ...
- 基于EF Core存储的Serilog持久化服务
前言 Serilog是 .NET 上的一个原生结构化高性能日志库,这个库能实现一些比内置库更高度的定制.日志持久化是其中一个非常重要的功能,生产环境通常很难挂接调试器或者某些bug的触发条件很奇怪.为 ...
- 移动web开发适配秘籍Rem
目录 移动web开发的特点 Rem 布局适配原理 Media Query(媒体查询) scss 工程使用函数计算 JS动态获取屏幕的宽度 直接将html 的 font-size 设置成 100px 移 ...
- SQL Server 验证某栏位是否存在某字符串（CHARINDEX）
SELECT * FROM LiuJun_PKqitchqi WHERE CHARINDEX('230527Z3258',qr_code) > 0
- 魔百和s905l3a蓝牙系列 在armbian驱动并使用蓝牙！
文章已废弃,因为现在x大的dtb不需要驱动直接可以使用 之后我会重新写文章,感谢大家
- Python按条件筛选、剔除表格数据并绘制剔除前后的直方图
本文介绍基于Python语言,读取Excel表格文件数据,以其中某一列数据的值为标准,对于这一列数据处于指定范围的所有行,再用其他几列数据的数值,加以数据筛选与剔除:同时,对筛选前.后的数据分别绘 ...
- vue小知识~注入provide！
注入表示的是将该组件的相关值,方法,实例向后代组件注入. 祖先元素中定义注入: export default { provide() { return { provideName: provideVa ...