mui之上拉刷新和mui-content结合解决ios上拉不回弹的bug
来源：互联网 发布：2018开淘宝店挣钱吗 编辑：程序博客网 时间：2024/06/06 10:05
模版
<body> <header class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <!--<a class=" mui-icon mui-icon-email mui-pull-right" onclick="sendMessage()"></a>--> <h1 id="title" class="mui-title">会员回访</h1> </header> <div id="pullrefresh" class="mui-content mui-scroll-wrapper"> <div class="mui-scroll"> <div class="mui-content"> <!--你的上拉刷新内容--> </div> </div> <div>为了确保ios下正常上拉刷新可以回弹,必须把 class=”mui-scroll” 的div放在 id=”pullrefresh” 里面,并且还要注意 ui-scroll-wrapper 的使用.
示例:
<!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"> <!--标准mui.css--> <link rel="stylesheet" href="../../css/mui.min.css"> <!--App自定义的css--> <!--<link rel="stylesheet" type="text/css" href="../css/app.css" />--> <style> .mui-card .mui-control-content { padding: 10px; } .mui-control-content {} .fdiv { float: left; } .call { margin-right: 10px; } </style> </head> <body> <header class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <!--<a class=" mui-icon mui-icon-email mui-pull-right" onclick="sendMessage()"></a>--> <h1 id="title" class="mui-title">会员回访</h1> </header> <div id="pullrefresh" class="mui-content mui-scroll-wrapper"> <div class="mui-scroll"> <div class="mui-content"> <div style="padding: 10px 10px; "> <div id="segmentedControl" class="mui-segmented-control"> <a class="no mui-control-item mui-active" href="#item1">未</a> <a class="yes mui-control-item" href="#item2">已</a> </div> </div> <!--未处理--> <div id="item1" class="mui-control-content mui-active"> <ul class="mui-table-view deal-no"> <li class="mui-table-view-cell mui-media vipdata-no"> <div id="" class="fdiv" style="width: 15%;"> <img class="photo mui-media-object mui-pull-left" src="../../images/custom.jpg"> <span class="vipid" style="display:none"></span> </div> <div class="fdiv" style="width: 65%;"> <p style="height: 50%;"> <span class="vipname" style="color: #000000;font-weight:bold;">小明 </span> <span class="integral" style="margin-right: 10px;">积分:100</span> <span class=" mui-icon mui-icon mui-icon-phone call" style="color: #28A745;"></span> <span class=" mui-icon mui-icon-email msg" style="color: #28A745;"></span> </p> <p class="cardtype" style="height: 50%;" class='mui-ellipsis'>卡号:12121212312312</p> </div> <div class="fdiv" style="width: 20%;"> <button type="button" class="deal mui-btn mui-btn-outlined">处理</button> </div> </li> </ul> </div> <!--已处理--> <div id="item2" class="mui-control-content"> <ul id="ul2" class="mui-table-view deal-yes"> <li class="mui-table-view-cell mui-media vipdata-yes"> <div id="" class="fdiv" style="width: 15%;"> <img class="photo mui-media-object mui-pull-left" src="../../images/custom.jpg"> <span class="vipid" style="display:none"></span> </div> <div class="fdiv" style="width: 65%;"> <p style="height: 50%;"><span class="vipname" style="color: #000000;font-weight:bold;">小明 </span> <span class="integral" style="margin-right: 10px;">积分:100</span> </p> <p class="cardtype" style="height: 50%;" class='mui-ellipsis'>卡号:12121212312312</p> </div> </li> </ul> </div> </div> </div> </div> <script src="../../js/mui.min.js"></script> <script src="../../js/h.min.js"></script> <script> var globalphone; mui.init({ swipeBack: true, //启用右滑关闭功能 pullRefresh: { container: '#pullrefresh', up: { auto: true, //自动上拉刷新一次 contentrefresh: '正在加载...', callback: pullupRefresh } } }); mui.plusReady(function() { console.log("plus api 加载完毕!"); }); var page = 1; var hasMore_no = false; var hasMore_yes = false; function pullupRefresh() { var wd = plus.nativeUI.showWaiting(); console.log("上拉刷新开始...当前页" + page); if(hasMore_no && hasMore_yes) { mui('#pullrefresh').pullRefresh().endPullupToRefresh(true); //参数为true代表没有更多数据了。 } else { mui('#pullrefresh').pullRefresh().endPullupToRefresh(false); //参数为true代表没有更多数据了。 } var data = plus.webview.currentWebview(); var type = data.type; var title = data.title; h("#title").html(title); if(type <= 2) { //已处理.未处理 h(".no").html("未处理"); h(".yes").html("已处理"); h(".deal").html("处理"); } if(type > 2) { //已唤醒,未唤醒 h(".no").html("未唤醒"); h(".yes").html("已唤醒"); h(".deal").html("唤醒"); } initdata(page++, 25, data.type); wd.close(); } mui.ready(function() { console.log("DOM构建 完毕!"); h(".vipdata-yes").hide(); //隐藏未处理模版 h(".vipdata-no").hide(); //隐藏已处理模版 Date.prototype.Format = function(fmt) { var o = { "M+": this.getMonth() + 1, //月份 "d+": this.getDate(), //日 "h+": this.getHours(), //小时 "m+": this.getMinutes(), //分 "s+": this.getSeconds(), //秒 "q+": Math.floor((this.getMonth() + 3) / 3), //季度 "S": this.getMilliseconds() //毫秒 }; if(/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length)); for(var k in o) if(new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length))); return fmt; } }); //------------------------------------android监听通话状态---------------------------------------------------- /** * 自定义一个全局函数,赋值函数给全局变量 Native */ var Native = (function($) { var native = {}; var receiver, main, context, TelephonyManager; //添加监听事件的函数,此函数可接收一个回调函数 native.listenTelPhone = function(callback) { $.plusReady(function() { context = plus.android.importClass('android.content.Context'); //上下文 TelephonyManager = plus.android.importClass('android.telephony.TelephonyManager'); //通话管理 main = plus.android.runtimeMainActivity(); //获取activity receiver = plus.android.implements('io.dcloud.feature.internal.reflect.BroadcastReceiver', { onReceive: doReceive //实现onReceiver回调函数 }); var IntentFilter = plus.android.importClass('android.content.IntentFilter'); var Intent = plus.android.importClass('android.content.Intent'); var filter = new IntentFilter(); filter.addAction(TelephonyManager.ACTION_PHONE_STATE_CHANGED); //监听电话状态 main.registerReceiver(receiver, filter); //注册监听 }); function doReceive(context, intent) { plus.android.importClass(intent); var phoneNumber = intent.getStringExtra(TelephonyManager.EXTRA_INCOMING_NUMBER), telephony = context.getSystemService(context.TELEPHONY_SERVICE), state = telephony.getCallState(); switch(state) { case TelephonyManager.CALL_STATE_RINGING: callback && callback(1, phoneNumber); window.console.log("[Broadcast]等待接电话=" + phoneNumber); break; case TelephonyManager.CALL_STATE_IDLE: callback && callback(0, phoneNumber); window.console.log("[Broadcast]电话挂断=" + phoneNumber); break; case TelephonyManager.CALL_STATE_OFFHOOK: callback && callback(2, phoneNumber); window.console.log("[Broadcast]通话中=" + phoneNumber); break; } } }, //取消监听事件的函数 native.removeListenTelPhone = function() { if(receiver) { main = plus.android.runtimeMainActivity(); //获取activity main.unregisterReceiver(receiver); //删除监听 console.log("取消android通话监听事件"); receiver = null; } } return native; }(mui)); //androidRecord(); function postData(url, data, callback, waitingDialog) { mui.ajax(url, { data: data, dataType: 'json', crossDomain: true, type: 'post', timeout: 60000, success: callback, error: function(xhr, type, errorThrown) { waitingDialog.close(); mui.alert("<网络连接失败，请重新尝试一下>", "错误", "OK", null); } }); }; //page当前页,size页大小,type类型(参考接口) function initdata(page, size, type) { //未处理 console.log("未处理...........:"); getdata(page, size, type, 0, function(data) { //服务器返回响应，根据响应结果，分析是否登录成功； if(data.status != "1") { console.log("网络请求页面数据---失败!"); mui.alert(data.info); return; } if(data.status == "1") { console.log("网络请求页面数据---成功!"); console.log("未处理数据大小:" + data.listhrvip.length); if(data.listhrvip.length == 0) { console.log("没有更多数据了!"); hasMore_no = true; // mui('#pullrefresh').pullRefresh().endPullupToRefresh(true); return; } //添加未处理会员列表 adddatano(data); } }); //已处理 console.log("已处理..........."); getdata(page, size, type, 1, function(data) { //服务器返回响应，根据响应结果，分析是否登录成功； if(data.status != "1") { console.log("网络请求页面数据---失败!"); // mui.alert(data.info); return; } if(data.status == "1") { console.log("网络请求页面数据---成功!"); console.log("已处理数据大小:" + data.listhrvip.length); if(data.listhrvip.length == 0) { console.log("没有更多数据了!"); hasMore_yes = true; // mui('#pullrefresh').pullRefresh().endPullupToRefresh(true); return; } //添加已处理会员列表 adddatayes(data); } }); } function adddatayes(data) { var vipdatas = new Array(); vipdatas = data.listhrvip; for(var i = 0; i < vipdatas.length; i++) { var yesli = h(".vipdata-yes").clone(); yesli.show(); yesli.find(".vipid").html(vipdatas[i].vipid); //会员id yesli.find(".vipname").html(vipdatas[i].vipname); //会员名字 yesli.find(".integral").html("积分:" + vipdatas[i].integral); //会员积分 yesli.find(".cardtype").html("卡类型:" + vipdatas[i].typename); //会员卡号 yesli.appendTo(".deal-yes"); } } function adddatano(data) { var vipdatas = new Array(); vipdatas = data.listhrvip; for(var i = 0; i < vipdatas.length; i++) { var noli = h(".vipdata-no").clone(); noli.show(); noli.find(".vipid").html(vipdatas[i].vipid); //会员id noli.find(".vipname").html(vipdatas[i].vipname); //会员名称 // console.log("会员名:---------------" + vipdatas[i].vipname); noli.find(".integral").html("积分:" + vipdatas[i].integral); //会员积分 noli.find(".cardtype").html("卡类型:" + vipdatas[i].typename); //会员卡号 noli.appendTo(".deal-no"); } } function getdata(page, size, type, status, callback) { console.log("网络请求 页面数据---开始"); mui.post(plus.storage.getItem("url"), { act: "usertasklist", username: plus.storage.getItem('TOKEN_USER'), key: plus.storage.getItem('TOKEN_LOGIN'), page: page, size: size, searchkey: "", type: type, status: status }, callback, 'json'); } //点击头像进入详情页面 mui("#pullrefresh").on('tap', 'img', function() { console.log(h(this).next().html()); var wd = plus.nativeUI.showWaiting(); var vipid = h(this).next().html(); var data = { "act": "getvipdetail ", "username": plus.storage.getItem('TOKEN_USER'), "key": plus.storage.getItem('TOKEN_LOGIN'), "vipid": vipid }; mui.post(plus.storage.getItem("url"), data, function(data) { wd.close(); if(data.status != "1") { mui.alert(data.info); return; } mui.openWindow({ url: '../customs.html', extras: data }); }, 'json'); }); //群发短信事件 function sendMessage() { // alert("发短信"); mui.openWindow({ url: 'message.html', }); } //打电话 mui("#item1").on('tap', '.mui-icon-phone', function() { androidRecord(); call(this); }); function call(t) { console.log(h(t).parent().parent().parent().find(".vipid").html()); //会员id var wd = plus.nativeUI.showWaiting(); var vipid = h(t).parent().parent().parent().find(".vipid").html(); var data = { "act": "getvipdetail", "username": plus.storage.getItem('TOKEN_USER'), "key": plus.storage.getItem('TOKEN_LOGIN'), "vipid": vipid }; mui.post(plus.storage.getItem("url"), data, function(data) { wd.close(); if(data.status != "1") { mui.alert(data.info); return; } console.log("电话号码:" + data.mobil); var btnArray = ['拨打', '取消']; var phone = data.mobil; globalphone = phone; mui.confirm('是否拨打' + phone + '?', '提示', btnArray, function(e) { //拨打 if(e.index == 0) { if(mui.os.ios) { //添加ios通话记录监听事件 createCall(phone); } // android通话 plus.device.dial(phone, false); } else { //取消 if(mui.os.android) { Native.removeListenTelPhone(); //取消通话监听事件 console.log("取消监听事件..."); } } }); }, 'json'); } /** *记录android通话 */ function androidRecord() { var sTime, endTime; mui.os.android && Native.listenTelPhone(function(code, number) { if(code === 2) { //接通 sTime = new Date(); } if(code === 0) { //挂断 endTime = new Date(); var secn = parseInt((endTime.getTime() - sTime.getTime()) / 1000); // alert(secn) console.log("通话时间间隔secn:" + secn); if(secn > 3) { var wd = plus.nativeUI.showWaiting(); var vipdata = plus.webview.currentWebview(); var data = { "act": "addstorecall", "username": plus.storage.getItem('TOKEN_USER'), "key": plus.storage.getItem('TOKEN_LOGIN'), "addjson": JSON.stringify([{ "phone": globalphone, "phonetimes": secn, "phoneaddtime": sTime.Format("yyyy-MM-dd hh:mm:ss"), "phonetype": "呼出" }]) }; console.log(JSON.stringify(data)); console.log("电话号码" + globalphone); postData(plus.storage.getItem("url"), data, function(data) { wd.close() if(data.status != "1") { console.log("网络请求失败!" + data.info); mui.alert(data.info); return; } console.log("成功添加通话记录！"); Native.removeListenTelPhone(); //取消通话监听事件 }, wd ); } } }); }; //------------------ios通话监听-------------------------------------------- /** * ios通话记录监听 * @param {Object} phone 电话号码 */ function createCall(phone) { var starttime; var endtime; mui.plusReady(function() { document.addEventListener("pause", function() { starttime = new Date(); console.log(starttime.getTime() / 1000 + " 应用从前台切换到后台"); mui.toast(" 应用从前台切换到后台"); }, false); document.addEventListener("resume", function() { endtime = new Date(); console.log(endtime.getTime() / 1000 + " 应用从后台切换到前台"); mui.toast("应用从后台切换到前台"); addIOSPhoneData(starttime, endtime); }, false); }); } /** * 添加ios通话记录 * @param {Object} starttime 开始监听时间 * @param {Object} endtime 结束监听时间 */ function addIOSPhoneData(starttime, endtime) { // document.removeEventListener("pause", true); // document.removeEventListener("resume", true); // console.log("取消事件..."); // 对Date的扩展，将 Date 转化为指定格式的String // 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符， // 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字) // 例子： // (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423 // (new Date()).Format("yyyy-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18 Date.prototype.Format = function(fmt) { //author: meizz var o = { "M+": this.getMonth() + 1, //月份 "d+": this.getDate(), //日 "h+": this.getHours(), //小时 "m+": this.getMinutes(), //分 "s+": this.getSeconds(), //秒 "q+": Math.floor((this.getMonth() + 3) / 3), //季度 "S": this.getMilliseconds() //毫秒 }; if(/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length)); for(var k in o) if(new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length))); return fmt; } var end = endtime.getTime() / 1000; var start = starttime.getTime() / 1000; var secn = end - start; console.log("时间差:" + Math.floor(secn)); var phoneaddtime = starttime.Format("yyyy-MM-dd hh:mm:ss"); var data = { "act": "addstorecall", "username": plus.storage.getItem('TOKEN_USER'), "key": plus.storage.getItem('TOKEN_LOGIN'), "addjson": JSON.stringify([{ "phone": globalphone, "phonetimes": Math.floor(secn), "phoneaddtime": phoneaddtime, "phonetype": "呼出" }]) }; mui.post(plus.storage.getItem("url"), data, function(data) { if(data.status != "1") { mui.alert(data.info); return; } mui.toast("成功添加本次通话记录!"); }, 'json'); } //发短信事件 mui("#item1").on('tap', '.mui-icon-email', function() { send(this); }); /** * 发短信事件 * @param {Object} t */ function send(t) { console.log("vipid=" + h(t).parent().parent().parent().find(".vipid").html()); //会员id var wd = plus.nativeUI.showWaiting(); var vipid = h(t).parent().parent().parent().find(".vipid").html(); var data = { "act": "getvipdetail ", "username": plus.storage.getItem('TOKEN_USER'), "key": plus.storage.getItem('TOKEN_LOGIN'), "vipid": vipid }; mui.post(plus.storage.getItem("url"), data, function(data) { wd.close(); if(data.status != "1") { mui.alert(data.info); return; } console.log("电话号码:" + data.mobil); var vipid = h(t).parent().parent().parent().find(".vipid").html(); var phoneNumber = data.mobil; // console.log("通过id获取会员详情:"+JSON.stringify(data)); var vipname = data.vipname; mui.openWindow({ url: 'one-message.html', extras: { "vipid": vipid, "phoneNumber": phoneNumber, "vipname": vipname } }); }, 'json'); } //已处理事件 mui("#item1").on('tap', '.deal', function() { deal(this); }); /** * 已处理事件 * @param {Object} t */ function deal(t) { console.log("要处理的vipid:" + h(t).parent().parent().find(".vipid").html()); console.log("要处理的vipname:" + h(t).parent().parent().find(".vipname").html()); var wd = plus.nativeUI.showWaiting(); var vipid = h(t).parent().parent().find(".vipid").html(); var name = h(t).parent().parent().find(".vipname").html(); var data = { "act": "updateuserstatus ", "username": plus.storage.getItem('TOKEN_USER'), "key": plus.storage.getItem('TOKEN_LOGIN'), "vipid": vipid, "name": name }; mui.post(plus.storage.getItem("url"), data, function(data) { wd.close(); if(data.status != "1") { mui.alert(data.info); return; } var noli = h(t).parent().parent().clone(); //必须先克隆一个出来才能追加 noli.find(".call").hide(); //隐藏电话图标 noli.find(".deal").hide(); //隐藏已处理按钮 noli.find('.msg').hide(); //隐藏短信图标 noli.prependTo(".deal-yes"); //追加到已处理列表头部 h(t).parent().parent().hide(); //如果点击 已处理 按钮,则隐藏 mui.toast(data.info); //最后弹出 toast 提示 }, 'json'); } </script> </body></html>阅读全文
0 0
- mui之上拉刷新和mui-content结合解决ios上拉不回弹的bug
- mui之ios上拉刷新不显示数据的bug
- mui下拉刷新和上拉加载
- mui的上拉刷新 下拉加载
- mui 双webview的上拉加载和下拉刷新和poppicker一起时候使用的问题以及解决
- MUI下拉刷新和上拉加载功能
- mui的上拉加载下拉刷新的实现
- mui 下拉刷新 上拉加载
- MUI上拉加载下拉刷新
- mui 上拉刷新下拉加载
- MUI 上拉加载，下拉刷新
- mui上拉刷新下拉加载
- MUI上拉加载，下拉刷新
- mui下拉刷新的整理
- dcloud-mui 仿ios 向下滑动页面，回弹效果
- 完美解决safari、微信浏览器下拉回弹效果和上拉空白的bug
- 对mui下拉刷新，上拉刷新样式自定义
- MUI----mui.init()和mui.plusReady()
- HttpClient请求和HttpURLConnect请求数据
- 最长回文子串
- AT学习报告一 软件的初步使用
- HttpURLConnection获取网络数据（实例：网路请求图片）
- 【面向JS--Date对象】
- mui之上拉刷新和mui-content结合解决ios上拉不回弹的bug
- 写给自己的话
- 堆排序
- hdu1224 Free DIY Tour【动态规划】
- centos 6.5使用 360WiFi2 无线模块
- Timeout 时间已到。在操作完成之前超时时间已过或服务器未响应。
- dpi 、 dip 、分辨率、屏幕尺寸、px、density 关系以及换算
- 将一个表中的某个字段根据id关联写入到另一张表中的某个字段中去
- BLE-NRF51822教程12-sdk中按键功能的使用
