MUI在ios中的一些问题
16lz
2021-01-24
MUI开发中,ios跟Android是存在差异,目前碰到的问题有以下几种
MUI为了更好地兼容IOS,多使用双webview模式,可以减少很多不必要的问题
1,IOS跟Adroid在margin值时,存在差异,这时候只要让手机判断是IOS还是Android即可,这里给出两种方式判
//第一种if(mui.os.android){ //注意,这里是小写的android $("#header").css("margin-top","50px");}else{ $("#header").css("margin-top","90px);};//第二种var phone = plus.os.name;if(phone == 'Android'){ $("#header").css("margin-top","50px");}else if(phone == "IOS"){ $("#header").css("margin-top"."90px");};
2,ios开发中不能使用单webview模式的下拉刷新跟上拉加载,这样会导致header头部会出现闪动问题(Andriud没有这个问题存在)
//ios中虽然支持这种单webview模式,但是会导致头部在上拉的时候出现头部闪动问题pullRefresh: { container: "#pullrefresh", //下拉刷新容器标识,querySelector能定位的css选择器均可,比如:id、.class等down: {style: 'circle', //必选,下拉刷新样式,目前支持原生5+ ‘circle’ 样式color: '#2BD009', //可选,默认“#2BD009” 下拉刷新控件颜色height: '50px', //可选,默认50px.下拉刷新控件的高度,range: '100px', //可选 默认100px,控件可下拉拖拽的范围offset: '0px', //可选 默认0px,下拉刷新控件的起始位置auto: false, //可选,默认false.首次加载自动上拉刷新一次callback: pulldownRefresh //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;},up: {height: 50, //可选.默认50.触发上拉加载拖动距离contentrefresh: "正在加载...", //可选,正在加载状态时,上拉加载控件上显示的标题内容callback: pullupRefresh } }
ios开发中如果想使用下拉加载上垃刷新,还是用官网的双webview模式
3,MUI在IOS中传递参数的时候自定义事件没有extras传参方式好用(我这里是这样的,当然Andriud没有这个问题存在)
如果非要使用自定义事件的话,需要提前预加载,预加载的话不建议mui.init( )中的preloadPages预加载
mui.init({//ios中这种模式的预加载貌似没有什么作用,或者只能执行一次preloadPages: [{url: 'abc.html',id: 'abc', }]});var list = plus.webview.getWebviewByid('abc');//这里可能返回空;
IOS中自定义传参这里推荐使用mui.preload( )来进行预加载
var page = mui.preload({ url:new-page-url, id:new-page-id,//默认使用当前页面的url作为id styles:{},//窗口参数 extras:{}//自定义扩展参数});
虽然官网上说一次只能预加载一个页面多个需要多次调用这个方法,在项目开发中我发现多次调用,第二次调用数据会消失,原因不明(待试) 更多相关文章
- Android初级程序员需要掌握的知识
- Android中WebView的使用指南:
- 【Android】学习笔记(1)――基本控件一
- Android(安卓)4.4(KitKat)中的设计模式-Graphics子系统
- Android中4种基本布局简单介绍和总结
- Android(安卓)启动模拟器是出现“Failed to allocate memory: 8
- Android系统开发02—Android布局管理器
- Android(安卓)viewPager实现翻动
- Android常用工具使用