今天讲点mui的使用经验吧，因为个人能力所限，所以很多技术只能达到使用的水平，至于原理还未摸清，也请高手们不吝赐教。
因为公司项目需求，需要实现多张图片轮播的功能，类似android原生的gallery，左右滑动切换到前后两张图片。
对于一个前端新手来说，我自认没有精力从头重现一个这样的功能，所以用了mui的框架，加点自己的改动来达到项目的要求。
先说下mui已经提供的关于gallery的功能，看它的api文档即可：UI组件.图片轮播
效果图
好了，现在基本的工具已经有了，我们要做的就是拿它来加加工，以达到特定的目的。
需求图
在mui原有gallery上需要添加的功能是，当按下需求图中蓝色箭头时，重新加载前或后四张图片（这四张图片定义为新的一轮，即前一轮/后一轮），并且让gallery默认选中第一张。
在实现这个功能的过程中，遇到了一个问题，如果我滑动到了当前四张图片中的第三张时，按蓝色箭头(右)，切换到后四张图片，并重新初始化gallery，galley初始化代码如下：
var gallery = mui('.mui-slider');gallery.slider({ interval:0//自动轮播周期，若为0则不自动播放，默认为0；});
虽然选择器(图中小白点)设置到了第一的位置，但当我滑动图片时却发现，图片是从第三张滑动到了第二张，而不是从第一张滑动到第二张，这是因为gallery还记忆着上一轮图片滑动到的位置。
关于这个问题，mui给出的解决办法是，调用gotoItem(index)方法，index是跳转到第index张图片，从0开始。所以当我切换到后一轮的四张图片时，我还需要让选择器设置成第一张图片的位置，即index == 0。
但是，这样同时也会造成一个新的问题，如果我把index从3设为0，gallery在切换的工程中会连同2,1这两张图片一起滑过，那么如果后一轮显示的图片很多，从最后一张切回到第一张时，会造成很差的视觉感受。
然而换个角度来看，如果后一轮只有一张图片的话，那么当我把index从3设为0，就不会有连续滑动的问题了，因为图片仅有一张，想滑也没得滑啊。
到这里问题就讲完了，解决的方法也是投机取巧而已：在切换新一轮图片前先切换到只包含一张图片的炮灰轮里，再切换到指定的一轮中即可。
我还没有研究过mui的源码，估计以后也不太会去研究，只能做到遇到问
题解决问题罢了。
网友评论