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

引言

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

首先看一张图实现效果

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

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

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

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

思路示意图

思路

第一步：在书写这个效果的时候，首先在页面布局上要整理清楚思路,ul标签显示列表，我们使用的mvvm框架是司徒正美老师的框架Avalon,但是用的版本是1.5版本的

5个属性变量来实现切换

上面的DOM结构由此组件的5个属性来决定它的展示，首先看到第一个属性那就是，btnControl属性，这个属性的值决定是否要显示左右切换的按钮，可以看到下面那两个按钮的DOM渲染也是使用这个属性控制，第二个属性newTabs,这是一个tab项的数组，它会随着点击切换tab而及时变更，所以显示的tab项会及时变更，第三四个属性分别是leftEnabled,rightEnabled,这两个属性控制按钮是否可点击，第五个属性是一个方法，arrowClick用来点击切换

第二步：根据之前上面的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 一个不断努力学习的女程序员