在uni-app中使用web-view 組件，默認鋪滿全屏并且層級高于前端組件，會遮擋頁面上的其他組件，在官網中寫明：
app-vue下web-view組件不支持自定義樣式，默認充滿螢屏不可控制大小；
nvue web-view 必須指定樣式寬高
具體示例：
代碼：
直接在UI上使用webview組件，也是默認全屏，需要動態加載，
先新建一個component.nvue檔案：
<template>
<div>
<view class="intro">本專案已包含uni ui組件，無需import和注冊，可直接使用，</view>
<!-- <web-view :src="url" class="webviewStyles"></web-view> -->
</div>
</template>
<script>
var wv;
export default {
data() {
return {
url: 'https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126-lite.m4v',
}
},
mounted() {
// #ifdef APP-PLUS
wv = plus.webview.create("","webview",{
plusrequire:"none", //禁止遠程網頁使用plus的API，有些使用mui制作的網頁可能會監聽plus.key，造成關閉頁面混亂，可以通過這種方式禁止
//'uni-app': 'none', //不加載uni-app渲染層框架，避免樣式沖突
top:uni.getSystemInfoSync().statusBarHeight+293, //放置在titleNView下方，如果還想在webview上方加個地址欄的什么的，可以繼續降低TOP值
height:300
})
wv.loadURL(this.url)
var currentWebview = this.$parent.$scope.$getAppWebview(); //此物件相當于html5plus里的plus.webview.currentWebview()，在uni-app里vue頁面直接使用plus.webview.currentWebview()無效，非v3編譯模式使用this.$mp.page.$getAppWebview()
currentWebview.append(wv);//一定要append到當前的頁面里！！！才能跟隨當前頁面一起做影片，一起關閉
setTimeout(function() {
console.log(wv.getStyle())
}, 1000);//如果是首頁的onload呼叫時需要延時一下，二級頁面無需延時，可直接獲取
// #endif
},
beforeDestroy() {
wv.close()
//wv.hide()
},
}
</script>
<style>
.intro {
color: #007AFF;
}
</style>
在vue中呼叫：呼叫方法與vue中相同，將component.nvue作為一個組件使用，
<template>
<view class="container">
<view class="intro">本專案已包含uni ui組件，無需import和注冊，可直接使用，在代碼區鍵入字母u，即可通過代碼助手列出所有可用組件，游標置于組件名稱處按F1，即可查看組件檔案，</view>
<text class="intro">詳見：</text>
<uni-link :href="href" :text="href"></uni-link>
<!-- <web-view :src="url" @message="getMessage" class="webviewStyles"></web-view> -->
<componentPage></componentPage>
</view>
</template>
<script>
import componentPage from '../component.nvue'
var wv;
export default {
data() {
return {
href: 'https://uniapp.dcloud.io/component/README?id=uniui',
url: 'https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126-lite.m4v',
}
},
components: {
componentPage,
},
methods: {
}
}
</script>
<style>
.container {
padding: 20px;
font-size: 14px;
line-height: 24px;
}
.webviewStyles{
width: auto;
height: 100px;
}
</style>
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/339189.html
標籤：其他