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

解决方案:查找该子元素的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. cs231n spring 2017 lecture6 Training Neural Networks I

    1. 激活函数: 1)Sigmoid,σ(x)=1/(1+e-x).把输出压缩在(0,1)之间.几个问题:(a)x比较大或者比较小(比如10,-10),sigmoid的曲线很平缓,导数为0,在用链式法 ...

  2. $random 函数用法

    $random函数调用时,返回一个32位的随机数,它是一个带符号的整形数.如下例: reg[23:0] rand; rand = $random % 60; //产生一个在 -59~59 范围的随机数 ...

  3. 用数组实现队列(C++)

    #include <iostream> using namespace std; template<typename T, int size = 0> class Queue ...

  4. linux服务器项目部署

    重启服务器 :reboot C:\Users\maple>mysql -u root -pEnter password: ******mysql> use test;Database ch ...

  5. Leetcode刷题记录 剑指offer

    面试题3:数组中重复数字 # 使用set,时间复杂度O(n),空间复杂度O(n)class Solution(object): def findRepeatNumber(self, nums): &q ...

  6. Java多态详解

    package QianFeng02; //多态 public class Polymorphic { public static void main(String[] args){ // HomeC ...

  7. YCSB项目学习

    主要总结Yahoo的数据库测试项目YCSB的使用(针对redis). github网址:https://github.com/brianfrankcooper/YCSB 需要安装 java maven ...

  8. UEditor问题整理

    网上可以使用的富文本编辑器有很多,但是经过慎(sui)重(shou)思(yi)考(cha),选择了UEditor,毕竟是百度的东西,质量上应该经得起推敲,另外,使用别人的插件,总要去适应别人的编码习惯 ...

  9. SGD与Adam识别MNIST数据集

    几种常见的优化函数比较:https://blog.csdn.net/w113691/article/details/82631097 ''' 基于Adam识别MNIST数据集 ''' import t ...

  10. Scheme实现数字电路仿真(3)——模块

    版权申明:本文为博主窗户(Colin Cai)原创,欢迎转帖.如要转贴,必须注明原文网址 http://www.cnblogs.com/Colin-Cai/p/12242650.html 作者:窗户 ...