mui 双webview的上拉加载和下拉刷新和poppicker一起时候使用的问题以及解决
来源：互联网 发布：2017美国加息影响知乎 编辑：程序博客网 时间：2024/05/18 05:00
所遇到的问题，
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() {//下拉1var userPicker = new mui.PopPicker();userPicker.setData([{value: '1,2',text: '全部' }, {value: '2',text: '求购'}]);//下拉2var userPicker2 = new mui.PopPicker();userPicker2.setData([{value: '5',text: '图书'}, {value: '6',text: '其他'}]);//下拉3var 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() {//下拉1var userPicker = new mui.PopPicker();userPicker.setData([{value: '1,2',text: '全部' }, {value: '1',text: '出售' }, {value: '2',text: '求购'}]);//下拉2var 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: '其他'}]);//下拉3var 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>阅读全文
0 0
- mui 双webview的上拉加载和下拉刷新和poppicker一起时候使用的问题以及解决
- mui下拉刷新和上拉加载
- mui的上拉刷新 下拉加载
- MUI下拉刷新和上拉加载功能
- ListView的上拉加载和下拉刷新的使用
- UICollectionView的高级使用和上拉加载下拉刷新
- RecyclerView的五大开源项目-解决上拉加载、下拉刷新和添加Header、Footer等问题
- mui的上拉加载下拉刷新的实现
- MUi下拉刷新和上拉加载click事件失效问题
- 使用MUI框架，模拟手机端的下拉刷新，上拉加载操作。
- 你必须了解的RecyclerView的五大开源项目-解决上拉加载、下拉刷新和添加Header、Footer等问题
- 你必须了解的RecyclerView的五大开源项目-解决上拉加载、下拉刷新和添加Header、Footer等问题
- 你必须了解的RecyclerView的五大开源项目-解决上拉加载、下拉刷新和添加Header、Footer等问题
- 你必须了解的 RecyclerView 的五大开源项目 - 解决上拉加载、下拉刷新和添加 Header、Footer 等问题
- 你必须了解的RecyclerView的五大开源项目-解决上拉加载、下拉刷新和添加Header、Footer等问题
- 你必须了解的RecyclerView的五大开源项目-解决上拉加载、下拉刷新和添加Header、Footer等问题
- 你必须了解的RecyclerView的五大开源项目-解决上拉加载、下拉刷新和添加Header、Footer等问题
- 你必须了解的RecyclerView的五大开源项目-解决上拉加载、下拉刷新和添加Header、Footer等问题
- 学生信息管理系统之ASCII问题汇总
- android studio打包以及gradle配置构建
- darknet用自己的数据进行训练
- Dahdi驱动源代码分析之四DMA缓存区
- java开发编程及工程部署中编码问题
- mui 双webview的上拉加载和下拉刷新和poppicker一起时候使用的问题以及解决
- Spring Junit4 单元测试回滚
- Mysql 列转行统计查询 、行转列统计查询
- 【多媒体封装格式详解】---MP4【3】
- 最大公约数
- 源码学习之ReentrantLock
- ios build fdk-aac
- [文献阅读]dropout as a bayesian approximation: representing model uncertainty in deep learning
- 【线段树左右衔接区间更新查找问题】I
