狼烟蛮蛮
狼烟蛮蛮
  • 发布:2016-12-28 15:09
  • 更新:2018-06-10 18:37
  • 阅读:1936

mui的上拉加载只占用屏幕的一部分

分类:MUI

我的页面有图片轮播和logo部分组成,下面是上拉加载的列表,但是,使用mui进行上啦刷新时只是列表的一部分会动,图片和logo都不动。
简要代码如下:
<div id="slider" class="mui-slider mui-content">
<div class="mui-slider-group mui-slider-loop">
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#"><img src="" name="loop"></a>
</div>
<div class="mui-slider-item">
<a href="#"><img src="" name="loop"></a>
</div>
<div class="mui-slider-item">
<a href="#"><img src="" name="loop"></a>
</div>
<div class="mui-slider-item">
<a href="#"><img src="" name="loop"></a>
</div>
<div class="mui-slider-item">
<a href="#"><img src="" name="loop"></a>
</div>
<div class="mui-slider-item">
<a href="#"><img src="" name="loop"></a>
</div>
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#"><img src="" name="loop"></a>
</div>

    </div>  
    <div class="mui-slider-indicator">  
        <div class="mui-indicator mui-active mui-pull-left"></div>  
        <div class="mui-indicator mui-pull-left"></div>  
        <div class="mui-indicator mui-pull-left"></div>  
        <div class="mui-indicator mui-pull-left"></div>  
        <div class="mui-indicator mui-pull-left"></div>  
    </div>  
</div>  

<div class="search_box" id="search-box">  
    <a class="search-box-img" href="javascript:;">  

    </a>  
</div>  
<!--  
    作者:offline  
    时间:2016-12-20  
    描述:logo  
-->  
<div class="mui-content-padded" style="margin-top: 0;margin-bottom: 0;position: absolute;z-index: 2;padding: 0;">  
    <div class="logo">  
        <div class="logo-img">  

        </div>  
    </div>  
    <div class="hello">  
        <p >Hello,欢迎来到校园</p>  
    </div>  
</div>  

<!--  
    作者:offline  
    时间:2016-12-20  
    描述:actives  
-->  
<content >  
<div class="mui-content" style="padding: 0;margin-bottom: 53.14px;" id="content">  

</div>  
</content>  

<script src="js/mui.min.js"></script>
<script src="js/zepto.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
mui.init({
gestureConfig:{
doubletap:true
},
subpages:[{
url:'index1.html',
id:'index1.html',
styles:{
top: '-20px',
bottom: '0px',
}
}]
});

    var contentWebview = null;  
    document.querySelector('#main').addEventListener('doubletap',function () {  
        if(contentWebview==null){  
            contentWebview = plus.webview.currentWebview().children()[0];  
        }  
        contentWebview.evalJS("mui('#main').pullRefresh().scrollTo(0,0,0)");  
    });  

</script>
index1.html的代码:

<div id="pullrefresh" class="mui-content mui-scroll-wrapper">  
        <div class="mui-scroll">  
            <!--数据列表-->  
            <ul class="mui-table-view mui-table-view-chevron actives" id="actives">  

            </ul>  
        </div>  
    </div>  

<script src="js/mui.min.js"></script>
<script src="js/zepto.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var _imgURL = "http://。。。";

var url = "http://。。。" + pagesize + "/pagenum/" + pagenum;
var active_img=$(".active-img");
var place = $('.school');
var time=$('.time');
var img1_url=[];
var address_all=[];
var actives_time=[];
var li_id=[];
var pagenum = 0;//页数
var pagesize = 5;//每页条数
mui.post(url,{pagesize:'pagesize',pagenum:'pagenum'},function(data){
var alljson_actives=JSON.stringify;
for(var i=0;i<data.length;i++){
//active - img - url
var img1=alljson_actives(data[i].img1);
img1=img1.replace(new RegExp(/(")/g),"");
img1_url[i]=_imgURL + img1;
// actives - address
var address=alljson_actives(data[i].address);
address=address.replace(new RegExp(/(")/g),"");
address_all[i] = address;
//actives - time
var start_time=alljson_actives(data[i].start_time);
start_time=start_time.replace(new RegExp(/(")/g),"");
actives_time[i]=start_time;
//取ID
var jsonid = alljson_actives(data[i].id);
li_id[i] =jsonid.replace(new RegExp(/(")/g),"");
}
mui.init({
pullRefresh: {
container: '#pullrefresh',
/down: {
callback: pulldownRefresh
},
/
up: {
contentrefresh: '正在加载...',
callback: pullupRefresh
}
}
});

        var count = 0;  
        /**  
         * 上拉加载具体业务实现  
         */  
        function pullupRefresh() {  
            setTimeout(function() {  
                mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。  
                var table = document.body.querySelector('.mui-table-view');  
                var cells = document.body.querySelectorAll('.mui-table-view-cell');  
                var lastnum = document.getElementsByTagName('li');  
                pagenum++;  
                pagesize++;  
                //alert(pagenum++)  
                for (var i = cells.length, len = i + 5; i < len; i++) {  
                    var li = document.createElement('li');  
                    li.className = 'mui-table-view-cell';  
                    li.innerHTML = '<img class="active-img" src=" '+   
                                        img1_url[i]+   
                                        '"></img>'+  
                                        '<div class="active-palce">'+  
                                            '<span class="place-a">'+  
                                            '街舞&nbsp;|&nbsp;街舞大赛'+  
                                            '</span>'+  
                                            '<span class="palce-b">'+  
                                                '<span class="school">'+  
                                                address_all[i]+  
                                                li_id[i]+  
                                                '</span>'+  
                                            '<span class="time">'+  
                                                 actives_time[i] +  
                                            '</span>'+  
                                            '</span>'+  
                                        '</div>';  
                    table.appendChild(li);  

                }  
            }, 500);  

            //alert(pagenum)  
        }  
        if (mui.os.plus) {  
            mui.plusReady(function() {  
                setTimeout(function() {  
                    mui('#pullrefresh').pullRefresh().pullupLoading();  
                }, 500);  

            });  
        } else {  
            mui.ready(function() {  
                mui('#pullrefresh').pullRefresh().pullupLoading();  
            });  
        }  

},'json');

</script>

2016-12-28 15:09 负责人:无 分享
已邀请:
2***@qq.com

2***@qq.com - xxxxx

把刷新容器的id 设置到body

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