在父页面创建子页面子页面无法滚动 ios没问题安卓有问题

分类：MUI

2016-03-05 11:49 负责人:无分享

2 个回复

liufan (作者)

//子页面

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<link href="../css/mui.min.css" rel="stylesheet"/>
<link href="../css/reset.css" rel="stylesheet" />
<link href="../css/global.css" rel="stylesheet"/>
<link href="../css/index.css" rel="stylesheet"/>
<script type="text/javascript" src="../js/common/Adaptive.js"></script>
<script src="../js/common/mui.min.js"></script>
<script type="text/javascript">
//上拉刷新
mui.init({
pullRefresh : {
container:'#scroll',//待刷新区域标识
up : {
contentrefresh: '正在加载...',
contentnomore:'没有更多数据了',
callback :function(){
this.endPullupToRefresh(false);
} //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
}
}
});
</script>
<style>
.page_1 center{
position: relative;
z-index: 2;
}
.content{
height: 100%;
}
</style>
</head>
<body>
<section class="content" id="content">
<div class="page_1 page_cont">
<div id="scroll">
<div class="mui-scroll">
<center><img src="../images/jpg_02.jpg"></center>
<div class="sect"></div>
</div>
</div>
</div>
</section>

    <script src="../js/common/zepto.min.js"></script>  
    <script src="../js/common/global.js"></script>  
    <script src="../js/common/common.js"></script>  
    <script>  
        var appPath="http://120.25.93.213/qs";//网站地址  
        var appPath_img="http://120.25.93.213";//图片地址  
        var url=appPath+'/servList/getServListByCondition.do';  
        var paging = {offset : 0, pagesize:5};  
        //手机端ajax数据

// document.addEventListener('plusready', function(){
// service_array.ajax_move(url);
// });
var service_array;
window.onload=function(){
service_array=new service_list();
$("#scroll").height($(window).height());
service_array.queryServiceList(url);

// mui('#scroll').scroll({
// deceleration: 0.0005, //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
// //indicators: false
// });
//PC端ajax数据
var service_list=function(){
var _this=this;
//手机端请求
// this.ajax_move=function(url){
// var xhr = new plus.net.XMLHttpRequest();
// xhr.onreadystatechange = function () {
// if ( xhr.readyState == 4 && xhr.status == 200 ) {
// var obj = JSON.parse(xhr.responseText);
// _this.page_ajax_1(obj.data);
// //alert( "xhr请求成功："+service_array.page_ajax_1(xhr.data,1));
// }
// }
// xhr.open( "post", url );
// xhr.send();
// }
//PC端调试请求
// this.ajax_move=function(url){
//
// $.ajax({
// type:"get",
// url:url,
// async:true,
// success:function(data){
// var obj = data;
// _this.page_ajax_1(obj.data);
// },
// error:function(){
// alert("请求失败");
// }
// });
// }
//第一页的内容最新
this.page_ajax_1=function(dataList){
for(var i=0;i<dataList.length;i++){
var strarclist="";
var data = dataList[i];
var servId = "serv"+data.id;
var servDetailId = "servDetail_"+data.id;
str_arclist+='<article>';
str_arclist+="<div><img src='"+appPath_img+data.sphotopath+"'></div>";
str_arclist+='<div id="'+servId+'">';
str_arclist+="<p class='title_1'><span>"+data.nickname+"</span><span>"+_this.getServTypeInfo(data);
str_arclist+="<p class='title_2'><span>"+data.title+"</span><span>"+_this.getServPriceAndUnit(data)+"</span></p>";
str_arclist+='<p class="title_3" id="'+servDetailId+'">'+data.detail+'</p>';
str_arclist+="<p class='title_4'><span>"+_this.getTimeWithNow(data.createtime)+"</span></p>";
str_arclist+="<p class='title_img'>"+_this.getServImgs(data.spicpath)+"<div style='clear: both;'></div></p>";
str_arclist+="</div>";
str_arclist+="</article>";
$('.page_cont .sect').append(str_arclist);
sub_str(".page_1 #"+servId+" .title_3","#full");
str_img(".page_1 #"+servId+" .title_3",".title_img");
is_scroll=true;
}
};
this.queryServiceList=function(){
var data = {};
data.offset = paging.offset;
data.pagesize = paging.pagesize;
new AjaxPost(url,data).post(function(data){
var result = data.type;
if(result=="1"){
console.log(paging.pagesize);
paging.offset += data.data.length;
if(data.data.length < paging.pagesize){
mui('#scroll').pullRefresh().endPullupToRefresh(true);
}
else{

                            _this.page_ajax_1(data.data);  
                        }  
                    }else{

// if(result!="1" && ){
// str_zcyc.str_error("暂时没有已发布的服务信息");
// }else{
// this.endPullupToRefresh(true);
// }
}
//mui('#scroll').pullRefresh().endPullupToRefresh(true);
});
};
this.getServTypeInfo = function(dataList){
var strVar = '';
$.ajaxSettings.async = false;
$.getJSON("../js/dictJson/serviceTypeDicJson.json",function(data){
var serviceType = data.serviceType;
var serviceSubType = data.serviceSubType;
$.each(serviceType, function (k, p) {
if(p.TypeID == dataList.parenttype){
strVar = "<b class='button_show b_span'>"+p.TypeName+"</b>";
}
})
$.each(serviceSubType, function (k, p2) {
if(p2.SubTypeID == dataList.servicetype){
strVar += p2.SubTypeName+"</span></p>";
}
})
});
return strVar;

            };  

            this.getServPriceAndUnit = function(data){  
                var unitname = data.unitname;  
                var price = data.price;  
                if(!isNullOrEmpty(price)){  
                    return price+unitname;  
                }else{  
                    return '未定义服务价格';  
                }  
            };  
            //距离现在的时间  
            this.getTimeWithNow = function(data){  
                if(data){  
                    return getTimeDiff(data);  
                }  
                return "";  
            };  
            //服务图片  
            this.getServImgs = function(data){  
                var servImgStr = data;  
                var imgStr = "";  
                if(servImgStr != undefined && servImgStr != null && servImgStr != ''){  
                    var arr =servImgStr.split(",");  
                    //alert(appPath_img+arr);  
                    if(arr.length == 1){  
                        return '<span style="background-image:url('+appPath_img+arr+')"></span>';  
                    }  
                    for(var j = 0; j < arr.length; j++){  
                        var str = arr[j];  
                        if(typeof str == 'string'){  
                            imgStr += '<span style="background-image:url('+appPath_img+str+')"></span>';;  
                        }  
                    }  
                }  
                return imgStr;  
            };    

        }  

    </script>  
</body>

</html>

liufan (作者)

父页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link href="css/mui.min.css" rel="stylesheet" />
<link href="css/reset.css" rel="stylesheet" />
<link href="css/global.css" rel="stylesheet"/>
<link href="css/index.css" rel="stylesheet"/>
<script src="js/common/Adaptive.js"></script>
</script>
</head>
<body>
<header class="header">
<center>趣赏</center>
<a class="person" id="service/webview_mask.html" onclick="clicked(this.id);"><span class="news"></span></a>
<a class="tap" id="tap"></a>
</header>

<nav class="nav_parent" id="nav_parent">
<li class="li_over"><span>最新</span></li>
<li><span>附近</span></li>
<li ><span>趣赏</span></li>
</nav>
</body>
<script src="js/common/zepto.min.js"></script>
<script src="js/common/mui.min.js"></script>
<script src="js/common/global.js"></script>
<script type="text/javascript">
function plusReady(){
// 设置系统状态栏背景为灰色
plus.navigator.setStatusBarBackground( "#f6f6f6" );
}
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}
function loaded(){
var H_header=document.querySelector(".header").clientHeight;
var H_nav_parent=document.querySelector(".nav_parent").clientHeight;
//var H_nav_footer=document.querySelector(".footer").clientHeight;
var subtop=H_header+H_nav_parent;
mui.init({
subpages:[{
url:'service/service_list.html',//子页面HTML地址，支持本地地址和网络地址
id:'service_list',
styles:{
top:subtop+'px',
bottom:0,
}
}]
});
}
window.addEventListener("load",loaded,false);
</script>
</html>

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

在父页面创建子页面子页面无法滚动 ios没问题安卓有问题

2 个回复

公告

相关问题

在父页面创建子页面 子页面无法滚动 ios没问题 安卓有问题

与内容相关的链接

2 个回复

公告

相关问题

在父页面创建子页面子页面无法滚动 ios没问题安卓有问题