轮播图

2017.11.12立项做混合app，2017.12.20交给测试，毕竟前端开发只有自己一个人，踩了很多坑，立贴记录一下。

第一次轮播图：使用swiper插件。
//其实最开始的时候，是打算自己手写轮播图的，但是发现自己写的bug太多，就使用插件了

<!--HTML部分-->

<div class="swiper-container">  
      <div class="swiper-wrapper">  
             <!--图片-->  
                <div class='swiper-slide'>  
                <a href='#'>  
                    <img src=''/>  
                </a>  
            </div>  
      </div>  
      <div class="swiper-pagination"><!-- 分页器 --></div>  
</div>

<!--JS部分-->

function slideshow (dom){  
                //12.27，ajax是自己封装的，后来放弃了，使用mui.get  
        ajax({  
            //type:"get",  
            url:"http://192.000.0.155:8080/getSlideShow",  
            dataType:"json",  
            suc:function(data){  
                var show =[];  
                var list =  data.imglist;  
                for(var i =0; i < list.length; i++){  
                    var j =  "<div class='swiper-slide'><a href='"+list[i].url+"'><img src='"+ list[i].path  +"'/></a></div>"  
                    show.push(j);  
                }  
                dom.innerHTML = show.join("");  
                //开启轮播图  
                var mySwiper = new Swiper ('.swiper-container', {  
                    loop: true, //循环播放  
                    autoplay:true, //自动轮播  
                    disableOnInteraction:false, //使用户点击后继续播放  
                    pagination: {el:'.swiper-pagination'},  
                });  
            }  
        })  

    }  
slideshow(document.querySelector(".swiper-wrapper"));

第二次轮播图：使用MUI
//不是因为swiper做的不好，而是项目中很多地方使用了mui，不想引入过多的插件
//说实话，mui的轮播图和swiper相比，很差，毕竟swiper是专业的

mui的轮播图就不上代码了，臃肿，简单，在HBuilder中，按下ms选择到轮播图就好

第三次轮播图：使用MUI
还是使用了MUI做轮播图，图片轮播代码部分没有改变

因为主页想换成网易云音乐那样左右滑动操作，但是在手指滑动轮播图时，不能阻止事件上传，窗口webview随手指滑动。至今没有找到合适解决办法。
重新更改webvive排布方式，把轮播图当作一个独立的html添加到主页main中，分解ontouchmove监听目标。解决主页滑动与轮播图滑动混淆问题。

/*main.html中js部分代码  */  
self = plus.webview.currentWebview();  

sliderW = plus.webview.create( "slider.html", "slider.html", {top: "0",height:"200px",hardwareAccelerated:true});   
homeW   = plus.webview.create( "home.html", "home.html",{bottom: "50px",top: "200px"});   
newsW   = plus.webview.create( "news.html", "news.html",{bottom: "50px",top:"0",hardwareAccelerated:true});  
userW   = plus.webview.create( "user.html", "user.html",{bottom: "50px",top:"0"});  

self.append(sliderW)  
self.append(homeW)  
self.append(newsW)  
self.append(userW)  

sliderW.show();  
homeW.show();  

function move (webviewID,s,t){  
    /*  s="rtl" = left // "ltr" =right  
        t = followFinger=跟随  || bounce=反弹  
     *   
     * */  
        function get (d){  
            return plus.webview.getWebviewById(d);  
        }  
    get(webviewID).drag(  
        {direction:s,moveMode:t},  
        {},  
        function(e){  
            if(e.result){  
                if(t == "followFinger"){  
                    get(webviewID).back();                    
                }  
            }  
        }  
    )  
}  
moves(homeW   ,newsW,"rtl",function(){  
    news.classList.add("border");  
    home.classList.remove("border");  
})  
······//重复造轮子img。。。  
//之所以没有使用mui的窗口滑动，是因为当初没有找到mui的插件，当后来知道mui的滑动插件的时候，又发现mui兼容Android4.0之下的问题，所以也就没有改

第四次轮播图：使用plus.nativeObj.ImageSlider
在2017.12.11，plus新增了原生图片轮播控件（plus.nativeObj.ImageSlider）支持自动播放属性（autoplay/interval），
2017.12.13，经过老板同意，舍弃主页滑动功能，为了性能，改mui轮播图为plus.nativeObj.ImageSlider

function slideshow (id,top) {  //ajax获取网络图片  
    mui.getJSON(sg("host")+"app/getSlideShow",{userId:sg("userId")},function(data){  
        if(data.code ==0){  
            var li = data.imglist;  
            var imgs =[]; //图片  
            var imghref = []; //需要跳转的页面  
            for(var i=0; i<li.length;i++){  
                imghref.push(li[i].url);  
                var s = {src:sg("fileHost")+li[i].path,height:"100%",width:"100%"};  
                imgs.push(s);  
            }//声明轮播图  
            var slider = new plus.nativeObj.ImageSlider("slider", {  
                                top:top||"0px",left:"0px",  
                                height:"200px",width:"100%",position:"static",  
                                autoplay:true,  
                                fullscreen:false,  
                                loop:true,  
                                images:imgs,  
                        });   

            plus.webview.getWebviewById(id).append(slider);  
            slider.show();  
            slider.addEventListener("click",function(e){  
                var index = e.currentImageIndex; //轮播图索引  
                get("main.html").evalJS("openAd('"+imghref[index]+"')")  
            })  
        }  
    })  
}

第五次轮播图：使用MUI
三天后测试，发现plus.nativeObj.ImageSlider在自动轮播时候当滚动一定次数后，滚动会卡断，手动滑动也是失败，只能向反方向滑动。
无奈重新更换为mui的轮播图。

第六次轮播图：使用MUI
所谓的第六次更改，是想把轮播图的图片做缓存，在ajax发现图片没有更改的时候，使用缓存图片，减少http请求。
后来放弃了。因为发现手机会自动缓存，我要考虑的问题反而是怎么减少缓存。。。。。心好累。。。。