weex-15-组件web的使用

本节学习内容

熟练掌握web组件的用法

功能
1.设置web组件加载的地址
2.控制向前,重载

1.设置web组件的地址

C4D9E0B9-668D-4157-B8E5-D0BFC335568E.png

设置src字段即可,代码如下

解释一个布局问题

1. flex: 1; 让组件具有弹性,弹性值为1，你可以这样理解,一个皮筋有一个力向外拉它,web视图就被这个力拉的和容器一样高
   
2. width:750px;设置宽度为屏幕宽度,注意这个特别重要,如果不设置宽度,在真机上是显示不出来的,网页上是可以显示的。

当然你也可以设置高度height,但是你要设置屏幕显示,显然这种方式比较困难

除了上述方式设置满屏,我们还可以使用决定定位设置满屏,布局代码如下

.page{
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

2.控制向前,向后,重载

当我们单击一个按钮打开一个新的网页的时候，如何返回前一个页面呢？我们带着疑问来继续今天的内容

第一步.我们需要引入一个webView模块

const webview = weex.requireModule('webview')

第二步 设置web标签引用名称

第三步 增加一个刷新按钮和一个上一页按钮

第四步 如何实现上一页事件

clickPre(){
    webview.goBack(this.$refs.web)
}

第五步 实现刷新事件

refresh(){
    webview.reload(this.$refs.web)
}

下面是布局代码

效果图如下

2DF529C7-2BBF-435C-9E37-1A245027028D.png

---

接下来还有几个事件要说一下

• 页面开始加载事件(pagestart)
• 页面加载完成事件(pagefinish)
• 页面失败事件(error)

就不多说了直接看代码

只要在methods集合中实现这几个方法就可以了