MVVM框架下实现左右滑动切换tab

引言

最近本身思考和书写了一些小的组件方法，由此来总结一下一个简单的js效果，因为咱们的项目是比较成熟的项目，不少经常使用的组件，效果，插件等项目中都应有尽有，几乎不多本身再去实现某些效果，基本上过多的是去书写应用逻辑，处理数据等，因为本周项目上出现了一个小bug,上线后我又临时修改，缘由居然是因为当时那个左右滑动的tab样式和方法是我直接将原来的代码复制过来的，没多看，可是就是由于一个小处粘错了，因此一个很边缘的问题出现了，因此这件事件也告诉我，尽可能不要复制代码，复制代码是一件不利于本身思考和学习的事情，并且后来我回过头来再去修改的时候才发现之前的代码在书写风格上有不少须要修改的，下面来总结一下MVVM框架下实现左右滑动切换tab的效果

首先看一张图实现效果

当tab个数过多的时候，添加左右切换功能

下面这个图是我作的思路图

（1）班级的显示个数不超过区域的宽度，因此正常显示

（2) 当返回的数据过多，须要展现的状态有以下三种(假设页面最多能够显示6个，数据有8个)

思路示意图

思路

第一步：在书写这个效果的时候，首先在页面布局上要整理清楚思路,ul标签显示列表，咱们使用的mvvm框架是司徒正美老师的框架Avalon,可是用的版本是1.5版本的
上面的DOM结构由此组件的5个属性来决定它的展现，首先看到第一个属性那就是，btnControl属性，这个属性的值决定是否要显示左右切换的按钮，能够看到下面那两个按钮的DOM渲染也是使用这个属性控制，第二个属性newTabs,这是一个tab项的数组，它会随着点击切换tab而及时变动，因此显示的tab项会及时变动，第三四个属性分别是leftEnabled,rightEnabled,这两个属性控制按钮是否可点击，第五个属性是一个方法，arrowClick用来点击切换

5个属性变量来实现切换

第二步：根据以前上面的DOM结构和最开始给的思路示意图能够清晰地分析出

1.默认状态下组件的btnControl，leftEnabled，rightEnabled属性值均为false

2.在组件init初始化方法中，根据获取到的原始tab列表断定btnControl这个属性的true和flase值

this.btnControl = (this.tab_list.length>6);复制代码

3.组件初始化时知道了tab_list的长度，由不一样的长度作不一样的逻辑

截取数组须要展现的部分

此处的逻辑单独写在一个方法中，由于当调用切换方法时，还须要此段逻辑的处理，经过一个变量startPos的值来截取须要展现的tab项，startPos值表明了显示在页面上的第一项在数组中的索引，由于显示在页面上的第一项会随着点击的左右切换而变化，其实第一项显示的内容就是数组在截取时的开始位置，此处须要思考清楚

4.初始化左右切换按钮的状态

初始化按钮的状态

初始化好了按钮的状态，根据不一样的值，显示不一样的样式类，控制按钮的图片样式和是否可点击状态

5.点击切换的方法

切换方法

根据传进来的不一样切换变量，改变startPos值，每次切换完毕以后，都须要跟新要显示的tab数组和按钮的状态

第三步：以上这几个步骤就是实现这一效果的所有思路和方法，因为项目框架不一样，此处不提供全部的实现方法代码，第三步骤就是动手去实现和书写这样的效果，最好的作法实际上是封装一个组件，可让全项目组的成员均可以使用，但是目前咱们的tab切换和tabpage加载有很高的耦合度，立刻拆出来我尚未这个能力，这些想法也是得益于本身去思考如何实现这个功能，思考多了，想多了，总结多了天然能力也就上来了，到时候去作这样具备挑战的任务也就更有底气了，新的一年里过去两周了写了4篇文章，2篇技术文章，2篇读书笔记，跟我年初给本身定的目标保持在一个节奏上，但愿其余作技术的小伙伴，也多思考，多总结，多分享

完结

但愿个人思路和总结能够帮助到其余人，也但愿你多多给我提出意见，让咱们一块儿在学习的路上共同发现和成长，2107年欢迎你和我一块儿作一个不断努力学习的知识分子

Cayley 一个不断努力学习的女程序员