需求定位:导航中实现子元素滚动到父元素的最左侧

解决方案:查找该子元素的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的更多相关文章

  1. Unity3d入门 - 关于unity工具的熟悉

    上周由于工作内容较多,花在unity上学习的时间不多,但总归还是学习了一些东西,内容如下: .1 根据相关的教程在mac上安装了unity. .2 学习了unity的主要的工具分布和对应工具的相关的功 ...

  2. 细说前端自动化打包工具--webpack

    背景 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的都知道,做网页就像用word编辑文档 ...

  3. 应用工具 .NET Portability Analyzer 分析迁移dotnet core

    大多数开发人员更喜欢一次性编写好业务逻辑代码,以后再重用这些代码.与构建不同的应用以面向多个平台相比,这种方法更加容易.如果您创建与 .NET Core 兼容的.NET 标准库,那么现在比以往任何时候 ...

  4. .NetCore中的日志(2)集成第三方日志工具

    .NetCore中的日志(2)集成第三方日志工具 0x00 在.NetCore的Logging组件中集成NLog 上一篇讨论了.NetCore中日志框架的结构,这一篇讨论一下.NetCore的Logg ...

  5. dll文件32位64位检测工具以及Windows文件夹SysWow64的坑

    自从操作系统升级到64位以后,就要不断的需要面对32位.64位的问题.相信有很多人并不是很清楚32位程序与64位程序的区别,以及Program Files (x86),Program Files的区别 ...

  6. Java基础Map接口+Collections工具类

    1.Map中我们主要讲两个接口 HashMap  与   LinkedHashMap (1)其中LinkedHashMap是有序的  怎么存怎么取出来 我们讲一下Map的增删改查功能: /* * Ma ...

  7. 渗透测试工具BurpSuite做网站的安全测试(基础版)

    渗透测试工具BurpSuite做网站的安全测试(基础版) 版权声明:本文为博主原创文章,未经博主允许不得转载. 学习网址: https://t0data.gitbooks.io/burpsuite/c ...

  8. CorelDRAW X8 如何破解激活(附国际版安装包+激活工具) 2016-12-15

    之前有位搞平面的好友“小瘦”说CDR X8无法破解,只能用X7.呃……呃……呃……好像是的 其实CDR8难激活主要在于一个点“没有离线激活了,只可以在线激活”,逆天不是专供逆向的,当然没能力去破解,这 ...

  9. Web Api 入门实战 (快速入门+工具使用+不依赖IIS)

    平台之大势何人能挡? 带着你的Net飞奔吧!:http://www.cnblogs.com/dunitian/p/4822808.html 屁话我也就不多说了,什么简介的也省了,直接简单概括+demo ...

随机推荐

  1. 吴裕雄--天生自然操作系统操作笔记:window10显示隐藏文件夹

    基于安全考虑,操作系统会隐藏一些文件和文件夹,防止误删除操作.但有可能是个别人为了隐藏一些私密数据,也同样采取隐藏的方式.

  2. vyos的Xvlan配置方式

    set interfaces bridge br0 address '172.12.12.10/24' //开启一个桥借口,用于xvlan的通信 set interfaces vxlan vxlan0 ...

  3. ZOJ-4089-Little Sub and Isomorphism Sequences

    给定你个数组,以及一些单点修改,以及询问,每次询问需要求得,最长的字串长度,它在其他位置存在同构. 当存在两个不相交的区间同构时,如: 1.2.…….n -1.n.n + 1.…….m.m + 1.m ...

  4. lower_bound()函数使用

    lower_bound()函数需要加头文件#include<algorithm>,其基本用途是查找(返回)有序区间中第一个大于或等于给定值的元素的位置,其中排序规则可以通过二元关系来表示. ...

  5. grep显示前后几行信息

    显示foo及前5行 1 grep -B 5 foo file 显示foo及后5行 1 大专栏  grep显示前后几行信息ode"> grep -A 5 foo file 显示 file ...

  6. numpy的基础计算2

    import numpy as np A = np.arange(14,2,-1).reshape((3,4)) #平均值 print(np.mean(A)) print(A.mean()) prin ...

  7. 你还记得2017年火爆的VR街机店,这一年他们过得还好吗?

    对于当下太过急于成功.一夜暴富的人们来说,似乎总是会急不可耐地去抓住每一个有可能成为大势的风口.在这份普遍存在的浮躁心理下,蕴含着极大的不确定性--既让大众认识到太多的创新产品和服务,也让很多参与者痛 ...

  8. JAVA如何判断两个字符串是否相等

    ==比较引用,equals 比较值 1.java中字符串的比较:== 我们经常习惯性的写上if(str1==str2),这种写法在java中可能会带来问题 example1: String a=&qu ...

  9. acedCommandS 实现pedit命令

    acedCommandS(RTSTR, _T("PEDIT"),                RTSTR, _T("M"),                R ...

  10. HTML笔记06--浮动第一章

    float --浮动 一 1.啥叫浮动? [使元素向左或向右移动,其周围的元素也会重新排列]简言之,就是让盒子并排. 通过float定义浮动 ---------- 未浮动样式代码如下: ------- ...