Kid
Kid
  • 发布:2015-05-28 10:00
  • 更新:2017-02-04 20:00
  • 阅读:3016

图片轮播动态插入图片后, 无法轮播

分类:MUI

我使用slider做图片轮播, 动态插入图片后, 默认显示第一张图片, 但轮播功能失效了, 怎么滑动都没反应了. 请问为什么会这样呢? 怎么解决?

2015-05-28 10:00 负责人:无 分享
已邀请:
00飞00

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,自动播放(单位是毫秒)

  • DCloud_UNI_CHB

    感谢反馈,确实文档错误,没有slideshowDelay参数,应该是interval置为0即可

    2015-08-18 18:54

zengz

zengz

同问!

DCloud_UNI_FXY

DCloud_UNI_FXY

插入后,动态调用一下试试,mui('#slider').slider().refresh();

  • ypf

    这个方法也没用,得手动滑动一次才会轮播,急求解决方法。

    2017-07-21 11:11

破军

破军

有没有解决啊??我也遇到了。是不是被初始化掉了。。

剧众

剧众

动态生成轮播组件,在页面中动态插入:
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.我计划判断本机是否有新增的图片,如果没有,就从服务器下载,这种模式是否可行,是否有业内流行的对于新增图片的处理机制?谢谢
谢谢各位老大!谢谢各位老大!谢谢各位老大!谢谢各位老大!谢谢各位老大!谢谢各位老大!

DCloud_UNI_FXY

DCloud_UNI_FXY

整个轮播区域所有dom节点都动态生成。然后手动调用slider初始化

  • 剧众

    多谢大哥回复,我继续请教:



    1. 我一开始是通过 var msg='<div class="mui-slider">'.....这样拼的,一直到对应的</div>,这样也不能轮播。所谓轮播区域所有DOM节点,是否是上述的范围?

    2. 我在plusready 函数中,使用mui('.mui-slider'),会报错,请教解决方法。。

      多谢大哥!多谢大哥!多谢大哥!多谢大哥!多谢大哥!多谢大哥!多谢大哥!多谢大哥!

    2016-03-24 16:52

  • DCloud_UNI_FXY

    回复 剧众:你拼写完这整个字符串并生成dom后,再直接初始化,而不是放到plusready里初始化

    2016-03-24 16:55

  • 剧众

    谢谢大哥:

    我不理解mui.init()和plusready()是什么功能。能介绍一下吗,我实在不理解我的业务逻辑应该写在哪里,对于控件的操作应该写在哪里?

    然后您说再直接初始化,是指在plusready外面初始化吗?初始化的语句是否为mui(.mui-slider).slider({

    interval:5000

    }) ?

    跪求解惑,多谢大哥!跪求解惑,多谢大哥!跪求解惑,多谢大哥!跪求解惑,多谢大哥!

    2016-03-24 17:04

  • DCloud_UNI_FXY

    回复 剧众: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

  • DCloud_UNI_FXY

    回复 剧众:不知道你怎么init gallary的

    2016-03-24 19:04

  • 剧众

    已解决,人间有真情,人间有真爱,把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

  • 剧众

    跪谢各位大哥,解决完这个问题,感觉整个人都好起来了。

    2016-03-25 08:37

591374836@qq.com

591374836@qq.com

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请求成功以后执行的,第一次打开页面的时候没问题,下拉刷新后就会出现问题。
请问要怎么处理呢?

beitafive@163.com

beitafive@163.com

ajax加载成功后,cb中实例化

该问题目前已经被锁定, 无法添加新回复