tab封装(一)/原理分析/刨析和滚动有关的位置边界处理

在前端开发中,我们大量使用开源很多UI框架和js框架,让我们使用的越好,做项目越快,但是同时让我们也对最基本的css属性和js最基本和最底层的api都遗忘,所以我们通过自己封装插件和组件,让我们更容易拾起最基本的知识点;以下我会从3个部分总结这个过程:1.原生js和jquery实现基本tab效果,2.使用面向对象js和jquery常用封装方法,3.通过vue封装和优化tab组件

1. 实现简单不滚动切换




    
    
    
    Document
    


    
  • item1
  • item2
  • item3
  • item4

2. 实现简单不滚动滑块过渡切换




    
    
    
    Document
    


    
  • item1
  • item2
  • item3
  • item4

3.实现简单滚动切换

  • 代码



    
    
    
    Document
    


    
  • 分析滚动边界原理图


    888.png

下篇文章基于这篇原理分析tab,实现原生js封装一个tab插件

你可能感兴趣的:(tab封装(一)/原理分析/刨析和滚动有关的位置边界处理)