我使用slider做图片轮播, 动态插入图片后, 默认显示第一张图片, 但轮播功能失效了, 怎么滑动都没反应了. 请问为什么会这样呢? 怎么解决?
- 发布:2015-05-28 10:00
- 更新:2017-02-04 20:00
- 阅读:4383
00飞00 - 全栈 云原生
刚好解决这个问题:^_^
官方原话:
注意:mui框架会默认初始化当前页面的图片轮播组件;若轮播组件内容为js动态生成时(比如通过ajax动态获取的营销信息),则需要在动态DOM生成后,手动调用图片轮播的初始化方法;代码如下:
//获得slider插件对象
var gallery = mui('.mui-slider');
gallery.slider({
interval:5000//自动轮播周期,若为0则不自动播放,默认为0;
});
若希望图片轮播不要自动播放,而是用户手动滑动才切换,只需要通过如上方法,将slideshowDelay参数设为0即可。
但是我试了slideshowDelay,好像没有这个参数。
================================================
正确的做法是:
动态生成DOM后,手动调用一下这段代码:
//获得slider插件对象
var gallery = mui('.mui-slider');
gallery.slider({
interval:5000//自动轮播周期,若为0则不自动播放,默认为0;
});
interval 值为0时,手动滑动才切换
interval 值大于0,自动播放(单位是毫秒)
动态生成轮播组件,在页面中动态插入:
getDocumentById("gallaryDiv").innerHTML=轮播组件代码,执行后,轮播组件不轮播了。
一、跪求解决办法
<head>
....
<script>
mui.init(); 我想问这个方法的出现的位置对于开发的影响是什么?
function plusReady(){ 我理解这个方法类似于 Ext.plusready({});不知道是否正确?
1.使用ajax方法从后台取得数据:图片、文字、链接地址,生成轮播组件代码,将该组件的代码,使用 getDocumentById("gallaryDiv").innerHTML=轮播组件代码 的方法生成。
2.miu('.mui-slider').slider({
interval:5000
});不管用
3.mui('#slider').slider().refresh(); 不管用
}
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}
</script>
</head>
二、求大神对于我的开发规范给予指点
1.mui.init();能不能说明的详细些呢,具体都干了什么?我不知道这个方法应该在什么地方初始化,是在plusready之前还是之后?
2.我计划判断本机是否有新增的图片,如果没有,就从服务器下载,这种模式是否可行,是否有业内流行的对于新增图片的处理机制?谢谢
谢谢各位老大!谢谢各位老大!谢谢各位老大!谢谢各位老大!谢谢各位老大!谢谢各位老大!
整个轮播区域所有dom节点都动态生成。然后手动调用slider初始化
-
多谢大哥回复,我继续请教:
- 我一开始是通过 var msg='<div class="mui-slider">'.....这样拼的,一直到对应的</div>,这样也不能轮播。所谓轮播区域所有DOM节点,是否是上述的范围?
- 我在plusready 函数中,使用mui('.mui-slider'),会报错,请教解决方法。。
多谢大哥!多谢大哥!多谢大哥!多谢大哥!多谢大哥!多谢大哥!多谢大哥!多谢大哥!
2016-03-24 16:52
-
谢谢大哥:
我不理解mui.init()和plusready()是什么功能。能介绍一下吗,我实在不理解我的业务逻辑应该写在哪里,对于控件的操作应该写在哪里?
然后您说再直接初始化,是指在plusready外面初始化吗?初始化的语句是否为mui(.mui-slider).slider({
interval:5000
}) ?
跪求解惑,多谢大哥!跪求解惑,多谢大哥!跪求解惑,多谢大哥!跪求解惑,多谢大哥!2016-03-24 17:04
-
回复 剧众:init是初始化一些配置项,plusready是让你可以在里边直接执行plus相关api。init里会自动识别需不需要再plusready里执行,比如下拉刷新配置,我的意思是你生成dom后,就可以直接初始化,跟plusready没有任何关系。plusready是5+相关,跟你的dom没关系
2016-03-24 17:09
-
求大哥帮我看一下,是这样吗:
<script type="text/javascript" charset="utf-8">
mui.init();
function plusReady(){
}
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}
var ip=myGallary.initIp;
alert("ip="+ip);
//生成轮播代码,写入DIV的innerHTM
myGallary.init("gallary");
mui('.mui-slider').slider({
interval:5000
});
</script>2016-03-24 17:30
-
已解决,人间有真情,人间有真爱,把mui(‘.mui-slider’).slider(.....)放到了myGallary.init中就可以了。
myGallary.init:
myGallary.init=function(location){
mui.ajax(myGallary.initIp,{
dataType:'json',
type:'post',
success:function(data)
{
alert("gallary.init.data="+data);
var jsonObj=eval(data);
// var msg='';
var msg='<div class="mui-slider"> <div class="mui-slider-group">';
var tail='<div class="mui-slider-indicator"> <div class="mui-indicator mui-active"></div> <div class="mui-indicator"></div> </div> </div>';
alert("jsonObj.length"+jsonObj.length);
for(var i=0;i<jsonObj.length;i++){
// var picName=data[i].picname;
var picName="pic"+(i+1)+".png";
// var href=data[i].href;
var href="#";
var text=data[i].text;
var perpictime=data[i].perpictime;
var temp='<div class="mui-slider-item">';
temp+= ' <a href="#">';
temp+= ' <img src="pic/'+picName+'">';
temp+= ' <p class="mui-slider-title">'+text+'</p>';
temp+= ' </a>';
temp+= '</div>';
msg+=temp;
}
msg+=tail;
alert("location="+location);
document.getElementById(location).innerHTML=msg;
alert("after render");
var gallary=mui('.mui-slider');
alert("定义后");
mui('.mui-slider').slider({
interval:5000
});
alert("初始化后");
}
});
};2016-03-25 08:35
var imgs = navs = imgs_first = imgs_last = '';
mui.each(data.data, function(i, v){
var url = _p.getPageUrl(v.function, v.params);
imgs += '<div class="mui-slider-item"><a href="'+url+'" target="_top"><img src="'+envConfig.imgHost+v.img+'"></a></div>';
if(i == 0){
imgs_last = '<div class="mui-slider-item mui-slider-item-duplicate"><a href="'+url+'"><img src="'+envConfig.imgHost+v.img+'"></a></div>';
navs += '<div class="mui-indicator mui-active"></div>';
}else if(i == data.data.length-1){
imgs_first = '<div class="mui-slider-item mui-slider-item-duplicate"><a href="'+url+'"><img src="'+envConfig.imgHost+v.img+'"></a></div>';
navs += '<div class="mui-indicator"></div>';
}else
navs += '<div class="mui-indicator"></div>';
});
mainBanner[0].innerHTML = '<div class="mui-slider-group mui-slider-loop">'+imgs_first+imgs+imgs_last+'</div><div class="mui-slider-indicator">'+navs+'</div>';
mainBanner.slider({ interval:3000 }).refresh();
@DCloud_MUI_FXY 这段代码是在ajax请求成功以后执行的,第一次打开页面的时候没问题,下拉刷新后就会出现问题。
请问要怎么处理呢?
DCloud_UNI_CHB
感谢反馈,确实文档错误,没有slideshowDelay参数,应该是interval置为0即可
2015-08-18 18:54