工具之scroolToIndex
需求定位:导航中实现子元素滚动到父元素的最左侧
解决方案:查找该子元素的offsetLeft值,然后让父元素滚动offsetLeft,parenDom.scrollLeft = childDom.offsetLeft
在vue原型上定义scrollToIndex函数
prototype.js
/**
* 滚动到index
* @param option = {
* parentsDom //父元素 dom
* childDom //子元素 dom
* }
*/
Vue.prototype.scrollToIndex = function (options = {}) {
let width = 0;
// 在全局找到
const el = document.getElementsByClassName(options.parentsDom),
defaults = setDefault(options),
elChild = document.getElementsByClassName(options.childDom); if (!judgeOptions(defaults)) {
return;
}
if (defaults.x) {
width = elChild[0].offsetLeft;
}
scrollLeft(el, width);
}; function setDefault(options) {
const defaults = {
parentsDom: '',
childDom: '',
x: true,
y: false,
};
return Object.assign({}, defaults, options);
} function judgeOptions(options) {
console.log(options, 'options');
if (typeof options.parentsDom !== 'string' || typeof options.childDom !== 'string'
|| document.getElementsByClassName(options.parentsDom).length === 0
|| document.getElementsByClassName(options.childDom).length === 0
) {
console.warn('Dom必须传是className并且存在');
return false;
}
return true;
} function scrollLeft(el = '', width = 0) {
if (!el) {
return;
}
el[0].scrollLeft = width;
}
.vue
this.scrollToIndex({
parentsDom: 'J-nav-select',
childDom: 'J-nav-active',
});
工具之scroolToIndex的更多相关文章
- Unity3d入门 - 关于unity工具的熟悉
上周由于工作内容较多,花在unity上学习的时间不多,但总归还是学习了一些东西,内容如下: .1 根据相关的教程在mac上安装了unity. .2 学习了unity的主要的工具分布和对应工具的相关的功 ...
- 细说前端自动化打包工具--webpack
背景 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的都知道,做网页就像用word编辑文档 ...
- 应用工具 .NET Portability Analyzer 分析迁移dotnet core
大多数开发人员更喜欢一次性编写好业务逻辑代码,以后再重用这些代码.与构建不同的应用以面向多个平台相比,这种方法更加容易.如果您创建与 .NET Core 兼容的.NET 标准库,那么现在比以往任何时候 ...
- .NetCore中的日志(2)集成第三方日志工具
.NetCore中的日志(2)集成第三方日志工具 0x00 在.NetCore的Logging组件中集成NLog 上一篇讨论了.NetCore中日志框架的结构,这一篇讨论一下.NetCore的Logg ...
- dll文件32位64位检测工具以及Windows文件夹SysWow64的坑
自从操作系统升级到64位以后,就要不断的需要面对32位.64位的问题.相信有很多人并不是很清楚32位程序与64位程序的区别,以及Program Files (x86),Program Files的区别 ...
- Java基础Map接口+Collections工具类
1.Map中我们主要讲两个接口 HashMap 与 LinkedHashMap (1)其中LinkedHashMap是有序的 怎么存怎么取出来 我们讲一下Map的增删改查功能: /* * Ma ...
- 渗透测试工具BurpSuite做网站的安全测试(基础版)
渗透测试工具BurpSuite做网站的安全测试(基础版) 版权声明:本文为博主原创文章,未经博主允许不得转载. 学习网址: https://t0data.gitbooks.io/burpsuite/c ...
- CorelDRAW X8 如何破解激活(附国际版安装包+激活工具) 2016-12-15
之前有位搞平面的好友“小瘦”说CDR X8无法破解,只能用X7.呃……呃……呃……好像是的 其实CDR8难激活主要在于一个点“没有离线激活了,只可以在线激活”,逆天不是专供逆向的,当然没能力去破解,这 ...
- Web Api 入门实战 (快速入门+工具使用+不依赖IIS)
平台之大势何人能挡? 带着你的Net飞奔吧!:http://www.cnblogs.com/dunitian/p/4822808.html 屁话我也就不多说了,什么简介的也省了,直接简单概括+demo ...
随机推荐
- 转载【docker】CMD ENTRYPOINT 的使用方法
原文:https://blog.csdn.net/u010900754/article/details/78526443
- 【Linux_Shell 脚本编程学习知识点、判断传入参数是否是 整数】
判断脚本传入的参数是否是整数 常用的几种方法 完整Shell 脚本如下: #!/bin/sh ##################################################### ...
- webpack中使用ECharts
npm安装ECharts 引入ECharts 通过 npm 上安装的 ECharts 和 zrender 会放在node_modules目录下.可以直接在项目代码中 require('echarts' ...
- [LC] 48. Rotate Image
You are given an n x n 2D matrix representing an image. Rotate the image by 90 degrees (clockwise). ...
- 升级mongodb数据库2.6.6到3.0.3,切换引擎,主从同步数据
只升级mongodb的版本极为简单,更新/替换 bin/目录下的可执行文件即可. debian和osx上的升级,按步骤来,没什么好说的. http://docs.mongodb.org/manual/ ...
- Inventor 卸载工具,完美彻底卸载清除干净Inventor各种残留注册表和文件
一些同学安装Inventor出错了,也有时候想重新安装Inventor的时候会出现这种本电脑windows系统已安装Inventor,你要是不留意直接安装,只会安装Inventor的附件,Invent ...
- MOOC(2)-Django开发get、post请求,返回json数据
1.对get请求直接返回参数 如果请求多个参数,也只能返回一个参数,这里只返回了username参数 如果想要返回多个参数值,可以返回json格式数据 2.对get请求返回json数据 # views ...
- ACID原则
ACID原则是数据库事务正常执行的四个,分别指原子性.一致性.独立性及持久性. 事务的原子性(Atomicity)是指一个事务要么全部执行,要么不执行.也就是说一个事务不可能只执行了一半就停止了.比如 ...
- 你相信吗:一加仑汽油可以给iPhone充电20年
一直以来,苹果公司的iPhone系列手机受到了全世界人民的喜欢,很多人就此成为了果粉.或许是由于我们过于在意iPhone系列手机出彩的外形,所以忽略了很多关于iPhone手机有意思的消息,我们今天就来 ...
- 以后的IT路还很长(1)
以后的IT路还很长(1) 最近有两位兄弟同事离职了,蛮可惜了,在一个战壕一起一.两年了,人各有志嘛!希望他们发展更好些! 目前的公司是个创业型的公司,公司从08年的50来个人,扩张到今年11年400多 ...