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事件,比我自己的例子要好很多。待了解。。。

原文地址:https://www.cnblogs.com/mitang/p/5216257.html