本节学习内容
熟练掌握web组件的用法
功能
1.设置web组件加载的地址
2.控制向前,重载
1.设置web组件的地址
C4D9E0B9-668D-4157-B8E5-D0BFC335568E.png
设置src字段即可,代码如下
<template>
<div class="page">
<web class="page" src="http://baidu.com"> </web>
</div>
</template>
<script>
</script>
<style>
.page{
display: flex;
flex-direction: column;
}
.page{
flex: 1;
width:750px;
}
</style>
解释一个布局问题
- flex: 1; 让组件具有弹性,弹性值为1，你可以这样理解,一个皮筋有一个力向外拉它,web视图就被这个力拉的和容器一样高
- width:750px;设置宽度为屏幕宽度,注意这个特别重要,如果不设置宽度,在真机上是显示不出来的,网页上是可以显示的。
当然你也可以设置高度height,但是你要设置屏幕显示,显然这种方式比较困难
除了上述方式设置满屏,我们还可以使用决定定位设置满屏,布局代码如下
.page{
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
2.控制向前,向后,重载
当我们单击一个按钮打开一个新的网页的时候，如何返回前一个页面呢？我们带着疑问来继续今天的内容
第一步.我们需要引入一个webView模块
const webview = weex.requireModule('webview')
第二步 设置web标签引用名称
<web class="web" src="http://baidu.com" ref='web'></web>
第三步 增加一个刷新按钮和一个上一页按钮
<template>
<div class="page">
<web class="web" src="http://baidu.com" ref='web' ></web>
<text class="pre-button" @click="clickPre">上一页</text>
<text class="refresh-button" @click="refresh">刷新</text>
</div>
</template>
第四步 如何实现上一页事件
clickPre(){
webview.goBack(this.$refs.web)
}
第五步 实现刷新事件
refresh(){
webview.reload(this.$refs.web)
}
下面是布局代码
<style>
.page{
display: flex;
flex-direction: column;
align-items: center;
}
.web{
flex:1;
width:750px;
}
.pre-button{
width:500px;
height: 88px;
border-radius: 44px;
background-color: burlywood;
color:white;
text-align: center;
line-height: 88px;
}
.refresh-button{
width:500px;
height: 88px;
border-radius: 44px;
background-color: indianred;
color:white;
text-align: center;
line-height: 88px;
}
</style>
效果图如下
2DF529C7-2BBF-435C-9E37-1A245027028D.png
接下来还有几个事件要说一下
- 页面开始加载事件(pagestart)
- 页面加载完成事件(pagefinish)
- 页面失败事件(error)
就不多说了直接看代码
<web class="web" src="http://baidu.com" ref='web' @pagestart="start" @pagefinish="finish" @error="error"></web>
只要在methods集合中实现这几个方法就可以了
