工具之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 ...
随机推荐
- 吴裕雄--天生自然操作系统操作笔记:window10显示隐藏文件夹
基于安全考虑,操作系统会隐藏一些文件和文件夹,防止误删除操作.但有可能是个别人为了隐藏一些私密数据,也同样采取隐藏的方式.
- vyos的Xvlan配置方式
set interfaces bridge br0 address '172.12.12.10/24' //开启一个桥借口,用于xvlan的通信 set interfaces vxlan vxlan0 ...
- ZOJ-4089-Little Sub and Isomorphism Sequences
给定你个数组,以及一些单点修改,以及询问,每次询问需要求得,最长的字串长度,它在其他位置存在同构. 当存在两个不相交的区间同构时,如: 1.2.…….n -1.n.n + 1.…….m.m + 1.m ...
- lower_bound()函数使用
lower_bound()函数需要加头文件#include<algorithm>,其基本用途是查找(返回)有序区间中第一个大于或等于给定值的元素的位置,其中排序规则可以通过二元关系来表示. ...
- grep显示前后几行信息
显示foo及前5行 1 grep -B 5 foo file 显示foo及后5行 1 大专栏 grep显示前后几行信息ode"> grep -A 5 foo file 显示 file ...
- numpy的基础计算2
import numpy as np A = np.arange(14,2,-1).reshape((3,4)) #平均值 print(np.mean(A)) print(A.mean()) prin ...
- 你还记得2017年火爆的VR街机店,这一年他们过得还好吗?
对于当下太过急于成功.一夜暴富的人们来说,似乎总是会急不可耐地去抓住每一个有可能成为大势的风口.在这份普遍存在的浮躁心理下,蕴含着极大的不确定性--既让大众认识到太多的创新产品和服务,也让很多参与者痛 ...
- JAVA如何判断两个字符串是否相等
==比较引用,equals 比较值 1.java中字符串的比较:== 我们经常习惯性的写上if(str1==str2),这种写法在java中可能会带来问题 example1: String a=&qu ...
- acedCommandS 实现pedit命令
acedCommandS(RTSTR, _T("PEDIT"), RTSTR, _T("M"), R ...
- HTML笔记06--浮动第一章
float --浮动 一 1.啥叫浮动? [使元素向左或向右移动,其周围的元素也会重新排列]简言之,就是让盒子并排. 通过float定义浮动 ---------- 未浮动样式代码如下: ------- ...