所遇到的问题，
1.把poppicker（什么选择插件【如图】） 插件装到了父页面（ essc_main.html）。
遇到了子页面在上面。所以poppicker插件一定要写在（子页面essc_sub.html）
2.把poppicker放在子页面（essc_sub.html）后发现，样式有了一些问题，加了padding-top
3. 拖动下面poppicker进行选择的时候，上拉和下拉也一块进行了拖动。我去查了官方文档看了的很无奈，并不能解决我所遇到的问题。
吐槽一下什么文档！就不能认真点吗，作为一个新人很无奈的。
还好，到处找答案的我还是找到了解决的办法。
mui('#pullrefresh').pullRefresh().setStopped(true);//暂时禁止滚动
mui('#pullrefresh').pullRefresh().setStopped(false);//开启禁止滚动
就是这样解决的,下面整理了一下
mui.ready(function() {
//下拉1
var userPicker = new mui.PopPicker();
userPicker.setData([{
value: '1,2',text: '全部'
}, {value: '2',text: '求购'}]);
//下拉2
var userPicker2 = new mui.PopPicker();
userPicker2.setData([{
value: '5',text: '图书'
}, {value: '6',text: '其他'
}]);
//下拉3
var userPicker3 = new mui.PopPicker();
userPicker3.setData([{
value: '0',text: '全部'
}, {value: '6',text: '1000元以上'
}]);
var select1 = document.getElementById('showUserPicker');
select1.addEventListener('tap', function(event) {
mui('#pullrefresh').pullRefresh().setStopped(true);//暂时禁止滚动
//console.log(userPicker);
userPicker.show(function(items) {
select1.innerText = items[0].text;
//返回 false 可以阻止选择框的关闭
//return false;
});
}, false);
var select2 = document.getElementById('showUserPicker2');
select2.addEventListener('tap', function(event) {
mui('#pullrefresh').pullRefresh().setStopped(true);//暂时禁止滚动
userPicker2.show(function(items) {
select2.innerText = items[0].text;
});
}, false);
var select3 = document.getElementById('showUserPicker3');
select3.addEventListener('tap', function(event) {
mui('#pullrefresh').pullRefresh().setStopped(true);//暂时禁止滚动
userPicker3.show(function(items) {
select3.innerText = items[0].text;
});
}, false);
});
//------------------------------------------//
mui("body").on('tap','.mui-btn.mui-btn-blue.mui-poppicker-btn-ok',function(){
mui('#pullrefresh').pullRefresh().setStopped(false);//开启禁止滚动
})
mui("body").on('tap','.mui-btn.mui-poppicker-btn-cancel',function(){
mui('#pullrefresh').pullRefresh().setStopped(false);//开启禁止滚动
})
mui("body").on('tap','.mui-backdrop',function(){
mui('#pullrefresh').pullRefresh().setStopped(false);//开启禁止滚动
})
//------------------------------------------// 下面父页面源码（essc_main.html）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="css/mui.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<style type="text/css">
.mui-media-body,
.mui-media-body {
min-height: 45px;
max-height: 45px;
white-space: normal;
}
.mui-media img{
float: right;
}
.xia{
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: super;
border-top: 4px solid;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}
/*导航栏样式*/
.mui-bar{
background-color: #35393c;
}
.mui-title{
color: #fff;
}
.mui-bar .mui-icon:active{
opacity: 1;
color: #fff;
}
.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active{
color: #000;
border-bottom: 0;
}
.mui-segmented-control.mui-segmented-control-inverted~.mui-slider-progress-bar{
background-color: #efeff4;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: #fff;"></a>
<h1 class="mui-title">二手市场</h1>
</header>
<div class="mui-content"></div>
<div class="fatie"></div>
</body>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
//启用双击监听
mui.init({
subpages:[{
url:'essc_sub.html',
id:'essc_sub',
styles:{
top: '45px',
bottom: '0px',
}
}]
});
</script>
</html>
下面是子页面（essc_sub.html）的源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="css/mui.min.css">
<link rel="stylesheet" type="text/css" href="css/mui.picker.css"/>
<link rel="stylesheet" type="text/css" href="css/mui.poppicker.css"/>
<style type="text/css">
.mui-media-body,
.mui-media-body {
min-height: 45px;
max-height: 45px;
white-space: normal;
}
.mui-media img{
float: right;
}
.xia{
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: super;
border-top: 4px solid;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}
/*导航栏样式*/
.mui-bar{
background-color: #35393c;
}
.mui-title{
color: #fff;
}
.mui-bar .mui-icon:active{
opacity: 1;
color: #fff;
}
.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active{
color: #000;
border-bottom: 0;
}
.mui-segmented-control.mui-segmented-control-inverted~.mui-slider-progress-bar{
background-color: #efeff4;
}
.mui-table-view-chevron .mui-table-view-cell{
padding-right: 12%;
}
#list li:nth-child(1){
padding-top: 27px;
}
</style>
</head>
<body>
<div class="">
<div class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted" style="position: fixed;z-index: 9;background: #fff;">
<a class="mui-control-item" data-id="" href="#item1" id='showUserPicker'>类型<i class="xia"></i></a>
<a class="mui-control-item" data-id="" href="#item1" id='showUserPicker2'>类别<i class="xia"></i></a>
<a class="mui-control-item" data-id="" href="#item1" id='showUserPicker3'>价格<i class="xia"></i></a>
</div>
<!--下拉刷新容器-->
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<!--数据列表-->
<ul id="list" class="mui-table-view mui-table-view-chevron">
</ul>
</div>
</div>
<script src="js/mui.min.js"></script>
<script src="js/mui.picker.js" type="text/javascript" charset="utf-8"></script>
<script src="js/mui.poppicker.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-2.1.0.js"></script>
<script>
mui.init({
pullRefresh: {
container: '#pullrefresh',
down: {
callback: pulldownRefresh
},
up: {
contentrefresh: '正在加载...',
callback: pullupRefresh
}
}
});
var page =1;
/**
* 下拉刷新具体业务实现
*/
function pulldownRefresh() {
setTimeout(function() {
page =1;
queryAppTZSC();//查询跳蚤市场 信息 刷新用的
mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
}, 1500);
}
/**
* 上拉加载具体业务实现
*/
function pullupRefresh() {
setTimeout(function() {
//
var t=$("#showUserPicker").attr("data-id");//type 属性
var c=$("#showUserPicker2").attr("data-id");//class 类型
var p=$("#showUserPicker3").attr("data-id");//pirce 价格
page= page*1+1; //页数
var pageN = page;
t=(t==null || t=="")?"1,2":t;
c=(c==null || c=="")?"0":c;
p=(t==null || p=="")?"0":p;
console.log(t+","+c+","+p+","+pageN);
mui.ajax(localStorage.getItem("http")+'appCommodity/queryAppTZSCCommCon?type='+t+'&classVal='+c+'&pirce='+p+'&pageNum='+pageN,{
dataType:'jsonp',//服务器返回json格式数据
jsonp: 'callback',
jsonpCallback:'callback',
crossDomain:true,//强制使用5+跨域
type:'get',//HTTP请求类型
async: true,
crossDomain:true,
timeout:10000,//超时时间设置为10秒；
success:function(date){
var obj=eval("["+date+"]")[0];
var t=obj.tzsclist;
if (obj.state == '0') {
if(t.length==0){
mui('#pullrefresh').pullRefresh().endPullupToRefresh(true); //参数为true代表没有更多数据了。
}else{
var str1="";
for(var i=0;i<t.length;i++){
var typeName= t[i].type == 1 ? "【出售】" : "【求购】";
if(t[i].picPath != "" && t[i].picPath != null){
str1+= '<li class="mui-table-view-cell mui-media">'+
' <a href="javascript:void(0);">'+
' <img class="mui-media-object mui-pull-left" src="'+t[i].picPath+'">'+
' <div class="mui-media-body">'+typeName+t[i].title+'</div>'+
' <p class="mui-ellipsis">'+
' <span style="float: left;">'+t[i].timestr+'</span>'+
' <span style="float: right;">'+t[i].username+'</span>'+
' </p>'+
' </a>'+
'</li>';
}else{
str1+= '<li class="mui-table-view-cell mui-media">'+
' <a href="javascript:void(0);">'+
' <div class="mui-media-body">'+typeName+t[i].title+'</div>'+
' <p class="mui-ellipsis">'+
' <span style="float: left;">'+t[i].timestr+'</span>'+
' <span style="float: right;">'+t[i].username+'</span>'+
' </p>'+
' </a>'+
'</li>';
}
}
}
$("#list").append(str1);
}else{
plus.nativeUI.toast("查询数据失败");
}
},
error:function(xhr,type,errorThrown){
plus.nativeUI.toast( "系统错误");
}
});
//
mui('#pullrefresh').pullRefresh().endPullupToRefresh(false); //参数为true代表没有更多数据了。
}, 1500);
}
mui.ready(function() {
//下拉1
var userPicker = new mui.PopPicker();
userPicker.setData([{
value: '1,2',text: '全部'
}, {value: '1',text: '出售'
}, {value: '2',text: '求购'}]);
//下拉2
var userPicker2 = new mui.PopPicker();
userPicker2.setData([{
value: '0',text: '全部'
}, {value: '1',text: '数码类'
}, {value: '2',text: '服装类'
}, {value: '3',text: '化妆品'
}, {value: '4',text: '食品'
}, {value: '5',text: '图书'
}, {value: '6',text: '其他'
}]);
//下拉3
var userPicker3 = new mui.PopPicker();
userPicker3.setData([{
value: '0',text: '全部'
}, {value: '1',text: '100元以下'
}, {value: '2',text: '100元-200元'
}, {value: '3',text: '200元-300元'
}, {value: '4',text: '300元-500元'
}, {value: '5',text: '500元-1000元'
}, {value: '6',text: '1000元以上'
}]);
var select1 = document.getElementById('showUserPicker');
select1.addEventListener('tap', function(event) {
mui('#pullrefresh').pullRefresh().setStopped(true);//暂时禁止滚动
console.log(userPicker);
userPicker.show(function(items) {
select1.innerText = items[0].text;
select1.setAttribute("data-id",items[0].value);
//返回 false 可以阻止选择框的关闭
//return false;
queryAppTZSC();//查询跳蚤市场 信息 刷新用的
});
}, false);
var select2 = document.getElementById('showUserPicker2');
select2.addEventListener('tap', function(event) {
mui('#pullrefresh').pullRefresh().setStopped(true);//暂时禁止滚动
userPicker2.show(function(items) {
select2.innerText = items[0].text;
select2.setAttribute("data-id",items[0].value);
queryAppTZSC();//查询跳蚤市场 信息 刷新用的
});
}, false);
var select3 = document.getElementById('showUserPicker3');
select3.addEventListener('tap', function(event) {
mui('#pullrefresh').pullRefresh().setStopped(true);//暂时禁止滚动
userPicker3.show(function(items) {
select3.innerText = items[0].text;
select3.setAttribute("data-id",items[0].value);
queryAppTZSC();//查询跳蚤市场 信息 刷新用的
});
}, false);
queryAppTZSC();//查询跳蚤市场 信息 刷新用的
});
function queryAppTZSC(){//查询跳蚤市场 信息 刷新用的
var t=$("#showUserPicker").attr("data-id");//type 属性
var c=$("#showUserPicker2").attr("data-id");//class 类型
var p=$("#showUserPicker3").attr("data-id");//pirce 价格
t=(t==null || t=="")?"1,2":t;
c=(c==null || c=="")?"0":c;
p=(t==null || p=="")?"0":p;
//console.log(t+","+c+","+p);
mui.ajax(localStorage.getItem("http")+'appCommodity/queryAppTZSCCommCon?type='+t+'&classVal='+c+'&pirce='+p+'&pageNum=1',{
dataType:'jsonp',//服务器返回json格式数据
jsonp: 'callback',
jsonpCallback:'callback',
crossDomain:true,//强制使用5+跨域
type:'get',//HTTP请求类型
async: true,
crossDomain:true,
timeout:10000,//超时时间设置为10秒；
success:function(date){
var obj=eval("["+date+"]")[0];
var t=obj.tzsclist;
if (obj.state == '0') {
var str1="";
for(var i=0;i<t.length;i++){
var typeName= t[i].type == 1 ? "【出售】" : "【求购】";
if(t[i].picPath != "" && t[i].picPath != null){
str1+= '<li class="mui-table-view-cell mui-media">'+
' <a href="javascript:void(0);">'+
' <img class="mui-media-object mui-pull-left" src="'+t[i].picPath+'">'+
' <div class="mui-media-body">'+typeName+t[i].title+'</div>'+
' <p class="mui-ellipsis">'+
' <span style="float: left;">'+t[i].timestr+'</span>'+
' <span style="float: right;">'+t[i].username+'</span>'+
' </p>'+
' </a>'+
'</li>';
}else{
str1+= '<li class="mui-table-view-cell mui-media">'+
' <a href="javascript:void(0);">'+
' <div class="mui-media-body">'+typeName+t[i].title+'</div>'+
' <p class="mui-ellipsis">'+
' <span style="float: left;">'+t[i].timestr+'</span>'+
' <span style="float: right;">'+t[i].username+'</span>'+
' </p>'+
' </a>'+
'</li>';
}
}
$("#list").empty();
$("#list").append(str1);
}else{
plus.nativeUI.toast("查询数据失败");
}
},
error:function(xhr,type,errorThrown){
plus.nativeUI.toast( "系统错误");
}
});
}
//------------------------------------------//
mui("body").on('tap','.mui-btn.mui-btn-blue.mui-poppicker-btn-ok',function(){
mui('#pullrefresh').pullRefresh().setStopped(false);//开启禁止滚动
})
mui("body").on('tap','.mui-btn.mui-poppicker-btn-cancel',function(){
mui('#pullrefresh').pullRefresh().setStopped(false);//开启禁止滚动
})
mui("body").on('tap','.mui-backdrop',function(){
mui('#pullrefresh').pullRefresh().setStopped(false);//开启禁止滚动
})
//------------------------------------------//
</script>
</body>
</html>
3581
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
