5***@qq.com
5***@qq.com
  • 发布:2017-03-20 11:34
  • 更新:2017-03-20 11:50
  • 阅读:3241

图文表格-左右滑动效果问题

分类:MUI

我想做 "左右滑动分页" 那个demo的效果,需要用js拼接,但是拼接结果不能正常滑动,把它复制到html上写死就能正常滑动

官方 hello mui 的demo效果


我的js拼接代码
数据源:http://www.cwz8.com/wzout/page/cwz8/wap/home/json/appInfo.json
js代码:


            for(var i in adJson) {  
                if(i%4==0){//一页的开始  
                    console.log(i);  
                    muiSliderItem = document.getElementById("mui-slider-item-template").cloneNode(true);//克隆一个滚动滑块模版  
                    muiSliderItem.id = "mui-slider-"+i;  
                    muiSliderItem.style.display="";  
                }  
                var muiTableViewCell = document.getElementById("mui-table-view-cell-template").cloneNode(true);//滚动滑块里边的一个单元位,每个滑块可放四个cell  
                muiTableViewCell.style.display="";  
                muiTableViewCell.id = "ad_appinfo_block_"+i;  
                var a = muiTableViewCell.querySelector(".aTag");  
                muiTableViewCell.querySelector(".aTag").href = adJson[i].address;  
                muiTableViewCell.querySelector(".aTag").appInfoType = adJson[i].appInfoType;  
                muiTableViewCell.querySelector(".aTag").querySelector(".ad_icon").src = adJson[i].photo;  
                muiTableViewCell.querySelector(".aTag").querySelector(".ad_name").innerText = adJson[i].name;  
                //console.log(muiTableViewCell);  
                muiSliderItem.children[0].appendChild(muiTableViewCell);  
                var temNum = parseInt(i)+1;   
                if(temNum%4==0){//完成一页  
                    console.log("-------------------------");   
                    adSliderGroup.appendChild(muiSliderItem);  
                }  
            }

要添加到这段html代码里边去:

<div class="ad_banner" id="ad_banner" style="display: none;">  
        <div class="mui-slider">  
            <div class="mui-slider-group mui-slider-loop" id="ad-slider-group"></div>  
        </div>  
</div>

滑块“页”模版

滑块里边的元素模版:

拼接结果是:


2017-03-20 11:34 负责人:无 分享
已邀请:
5***@qq.com

5***@qq.com (作者) - 为了生活

额,解决了,js拼接的滑动效果需要手动指定某个块去初始化的:
mui.init();这样初始化是不行的,需要指定某个div,例如:mui('.mui-slider').slider();

就酱 ╭(●`∀´●)╯╰(●’◡’●)╮

5***@qq.com

5***@qq.com (作者) - 为了生活

那个mui.init();测试的时候没注释的,,,后来试一下注释掉的,

要回复问题请先登录注册