本節(jié)學(xué)習(xí)內(nèi)容
熟練掌握web組件的用法
功能
1.設(shè)置web組件加載的地址
2.控制向前,重載
1.設(shè)置web組件的地址
C4D9E0B9-668D-4157-B8E5-D0BFC335568E.png
設(shè)置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>
解釋一個(gè)布局問題
- flex: 1; 讓組件具有彈性,彈性值為1轻纪，你可以這樣理解,一個(gè)皮筋有一個(gè)力向外拉它,web視圖就被這個(gè)力拉的和容器一樣高
- width:750px;設(shè)置寬度為屏幕寬度,注意這個(gè)特別重要,如果不設(shè)置寬度,在真機(jī)上是顯示不出來(lái)的,網(wǎng)頁(yè)上是可以顯示的嚎研。
當(dāng)然你也可以設(shè)置高度height,但是你要設(shè)置屏幕顯示,顯然這種方式比較困難
除了上述方式設(shè)置滿屏,我們還可以使用決定定位設(shè)置滿屏,布局代碼如下
.page{
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
2.控制向前,向后,重載
當(dāng)我們單擊一個(gè)按鈕打開一個(gè)新的網(wǎng)頁(yè)的時(shí)候薛窥，如何返回前一個(gè)頁(yè)面呢儒飒？我們帶著疑問來(lái)繼續(xù)今天的內(nèi)容
第一步.我們需要引入一個(gè)webView模塊
const webview = weex.requireModule('webview')
第二步 設(shè)置web標(biāo)簽引用名稱
<web class="web" src="http://baidu.com" ref='web'></web>
第三步 增加一個(gè)刷新按鈕和一個(gè)上一頁(yè)按鈕
<template>
<div class="page">
<web class="web" src="http://baidu.com" ref='web' ></web>
<text class="pre-button" @click="clickPre">上一頁(yè)</text>
<text class="refresh-button" @click="refresh">刷新</text>
</div>
</template>
第四步 如何實(shí)現(xiàn)上一頁(yè)事件
clickPre(){
webview.goBack(this.$refs.web)
}
第五步 實(shí)現(xiàn)刷新事件
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
接下來(lái)還有幾個(gè)事件要說一下
- 頁(yè)面開始加載事件(pagestart)
- 頁(yè)面加載完成事件(pagefinish)
- 頁(yè)面失敗事件(error)
就不多說了直接看代碼
<web class="web" src="http://baidu.com" ref='web' @pagestart="start" @pagefinish="finish" @error="error"></web>
只要在methods集合中實(shí)現(xiàn)這幾個(gè)方法就可以了
