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请求。
后来放弃了。因为发现手机会自动缓存,我要考虑的问题反而是怎么减少缓存。。。。。心好累。。。。
0 个评论
要回复文章请先登录或注册