日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后,達者為師

網站首頁 編程語言 正文

UNI-APP中webview加載狀態,開始加載,加載完成事件監聽

作者:滄海龍騰LV 更新時間: 2024-02-29 編程語言

目的:

當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

  • 上一篇:沒有了
  • 下一篇:沒有了
欄目分類
最近更新