網站首頁 編程語言 正文
目的:
當UNI-APP中的webvew處于正在加載頁面狀態時,顯示不確定進度框
方法:
//獲取webview頁面
var currentWebview = this.$mp.page.$getAppWebview().children()[4];
//加載時候 loading
plus.nativeUI.showWaiting()
//監聽加載完畢 關閉loading
currentWebview.addEventListener('loaded', function() {
plus.nativeUI.closeWaiting();
}, false);
onclose: Webview窗口關閉事件
onerror: Webview窗口錯誤事件
onloaded: Webview窗口頁面加載完成事件
onloading: Webview窗口頁面開始加載事件
示例代碼:
<template>
<view>
</view>
</template>
<script>
//將要創建的webview對象
var wv;
export default {
data() {
return {
windowInfo: null
}
},
props: {
devinfo: {
type: Object,
default: function(){
return {};
}
},
cmuid: {
type: Number,
default: 0
}
},
mounted() {
uni.getSystemInfo({
success: (res)=> {
this.windowInfo = res;
//this.createWvAndLoadUrl('https://uniapp.dcloud.io/static/web-view.html');
//this.createWvAndLoadUrl('http://www.baidu.com');
this.createWvAndLoadUrl(this.getConfigPageUrl());
}
});
},
beforeDestroy() {
//關閉webview對象
if(wv){
wv.close()
//wv.hide()
}
},
methods: {
/*創建web-view并加載url*/
createWvAndLoadUrl(url){
// #ifdef APP-PLUS
wv = plus.webview.create(url,"webview",{
plusrequire:"none", //禁止遠程網頁使用plus的API,有些使用mui制作的網頁可能會監聽plus.key,造成關閉頁面混亂,可以通過這種方式禁止
top: this.windowInfo.statusBarHeight + 126, //放置在titleNView下方。如果還想在webview上方加個地址欄的什么的,可以繼續降低TOP值
scalable: true,
height: this.windowInfo.windowHeight - this.windowInfo.statusBarHeight - 126
})
wv.addEventListener('loading', () => {
//plus.nativeUI.showWaiting()
this.api.showComLoading()
}, false);
//plus.nativeUI.showWaiting()
//this.api.showComLoading()
wv.addEventListener('loaded', () => {
//plus.nativeUI.closeWaiting();
this.api.hideComLoading()
}, false);
//wv.loadURL(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
},
/*獲取組態頁面url*/
getConfigPageUrl(){
let configView = {
'cmuid': this.cmuid,
'adaptorCode': this.devinfo.adapterCode,
'typeId': this.devinfo.type,
'id': this.devinfo.id,
'refreshtime': 5,
'jkxq_custom': 1
}
return this.api.configView(configView);
}
}
}
</script>
<style lang="scss">
</style>
完!!!
?
原文鏈接:https://ly9527.blog.csdn.net/article/details/115734354
- 上一篇:沒有了
- 下一篇:沒有了
相關推薦
- 2022-09-04 docker部署可執行jar包的思路與完整步驟_docker
- 2023-07-08 qt修改默認構建路徑
- 2022-11-08 python安裝包出現Retrying?(Retry(total=4,?connect=None,?
- 2023-06-19 Docker?查詢、停止、刪除和重啟容器的詳細過程_docker
- 2023-03-20 一文詳解pygame.sprite的精靈碰撞_python
- 2022-10-28 Python利用Rows快速操作csv文件_python
- 2022-03-30 C#數據類型轉換(顯式轉型、隱式轉型、強制轉型)_C#教程
- 2022-06-22 如何使用?Dockerfile?創建一個簡單容器_docker
- 欄目分類
-
- 最近更新
-
- window11 系統安裝 yarn
- 超詳細win安裝深度學習環境2025年最新版(
- Linux 中運行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符,流程控制 Flo
- 1. Int 和Integer 的區別,Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤:Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優雅實現加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發現-Nac
- Spring Security之基于HttpR
- Redis 底層數據結構-簡單動態字符串(SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列,發送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支