H5+ and mui学习记录
基础
1、H5+ 定义实现了一些调用原生方法的对象
2、其他的原生方法可以通过Native.js调用
webview
3、webview是调用原生界面的H5+对象
4、单个webview只承载单个页面的dom,多个webview可以组合,嵌套。
例如,为了流畅滚动,可以将目标页面分解为主页面和内容页面多个webview,主页面显示卡头卡尾区域,比如顶部导航、底部选项卡等;内容页面显示具体需要滚动的内容。
5、页面之间会相互遮挡,所以页面的大小位置很重要。
height和width两个属性默认为100%;因此top值和bottom值很重要,最好同时设置。
另外,注意的是子窗口的位置是以父窗口为准的。
6、index.html所在顶窗口,其id为可以通过plus.runtime.appid获得,其大小是屏幕大小。
7、webview之间数据通过消息传递
发送端 通过 fire(webviewObject,'msg',{data})
接收端,注意,事件需要注册到window对象,数据通过event.detail获得
注意自动的mask及相关的事件,很有用处。
8、预加载和显示
index窗口会默认显示,
open创建的webview自动显示
create创建的webview不会,但如果成为显示窗口的子窗口,也会自动显示
显示或隐藏子窗口的时候,要考虑父窗口的状态,
也可以使用预加载,mui.preload()
方法预加载,可立即返回对应webview的引用,需要时再显示出来
webview默认实现的mui.back,若当前webview为预加载页面,则hide当前webview;否则,close当前webview;
9、操作方法,有通过plus.webview的api方式,也有webviewObject对象方式,还有mui.show()等封装的方式。
10、通过组合操控多个webview,流畅显示切换多个场景
例如,通过底部菜单切换(显示位置为中间)的webview,同时要注意,顶部菜单栏的变换,和事件处理
安卓系统,back和menu系统事件也要整体处理好:关闭或隐藏了当前webview,要同时切换好顶、底部菜单栏
问题:
下拉刷新,我根据示例修改的,下拉框中的tap事件会收到影响,不太灵敏。直接在官方示例中查看tap事件,比我自己的例子要好很多。待了解。。。