weex-15-组件web的使用

本节学习内容

熟练掌握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集合中实现这几个方法就可以了

weex-15-组件web的使用

本节学习内容

推荐阅读更多精彩内容