Mui

技术总结 一、实名认证页面（RealNameAuthentication.html） 1.相机拍照蒙层，前端不易实现解决：用原生代码来解决的。进入拍摄界面，js所调用函数如下（该函数蕴含网络申请） function idCardPut(ruid, okCallback, failCallback, errorCallback) { var success = function(result) { var response = JSON.parse(result); if (response.meta.code === 0 && okCallback) { okCallback(response.meta, response.data) } else if (failCallback) { failCallback(response.meta, response.data) } } var failed = function(msg) { if (errorCallback) errorCallback(msg); } var callbackId = plus.bridge.callbackId(success, failed); plus.bridge.exec('ApiClient', 'idCardPut', [callbackId, '/user/auth/idcard/upload', '', ruid]);}二、人保购险页面（PersonalInsurancePay.html） 1.通过领取链接所关上的页面，若未领取，无奈返回到人保购险页面解决：关上带原生导航栏的页面（点击导航栏的按钮可返回） payWebview = mui.openWindow({ id: 'pay_page', url: 'LoadingPage.html', styles: { titleNView: { style: 'transparent', backgroundColor: '#FFFFFF', titleText: '保单领取', titleColor: '#000000', autoBackButton: true, } } });2.领取接口回调的响应工夫太长（大略一分钟），采纳此办法用户体验很差解决：采纳轮询的形式，设置一个定时器，领取链接页面加载实现后调用该定时器，每隔2s查问一次保单的领取状态（注：页面敞开时进行完最初一次领取状态的查问再敞开定时器） ...

下拉刷新组件的dom构造 <div id="refreshContainer" class="mui-scroll-wrapper"> <div id="refreshBox"> <div class="active" id="tab1"></div> <div id="tab2"></div> <div id="tab3"></div> </div> </div>css 被mui坑的- -。。。 /*因为下拉图标地位设置有效 则应用下拉刷新组件款式*/.mui-pull-top-pocket{ top: 5rem !important;}/*把列表展现在你想要的地位 */#refreshContainer{ height:100vh; padding-top: 2.2rem; padding-bottom: 3rem;}js逻辑 //多tab页切换时function onTabChange(){ $('#refreshBox').css('transform','translate3d(0px, 0px, 0px) translateZ(0px)')//切换时默认滚动到顶部，否则会呈现多个tab同时滚动导致其余列表呈现问题 mui('#refreshContainer').pullRefresh().refresh(true);//重置上拉加载组件}//多个tab共用一个下拉刷新组件 mui.init({ pullRefresh: { container: "#refreshContainer", //下拉刷新容器标识，querySelector能定位的css选择器均可，比方：id、.class等 down: { callback: function () { //列表刷新实现后，须要及时敞开对应的动画，否则会呈现有效的问题 mui("#refreshContainer").pullRefresh().endPulldownToRefresh();//完结动画 }, }, up: { callback: function () { ... mui("#refreshContainer").pullRefresh().endPullupToRefresh(false);//上拉加载时false示意还有数据 }, }, }, });