今天讲点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的源码,估计以后也不太会去研究,只能做到遇到问
题解决问题罢了。