How to set webview color in Uniapp

Uniapp method to set webview color: first add "webview-styles="webviewStyles"" to the webview tag; then set the color in "data()".

The operating environment of this tutorial: Windows 7 system, uni-app2.5.1 version. This method is suitable for all brands of computers.

Recommended (free): uni-app development tutorial

About the definition of the progress bar (loading) style of uniapp’s webview component

#1. The editor is learning uni-app recently. Because there are many external web pages loaded in the project. So the webview component must be used. But the server of some websites (don’t think wrongly) is because this website is a virtual currency trading website. You know. However, accessing such websites in the app often requires a blank period of three to four seconds.
There is still a progress bar on the web page. But the style is too ordinary. So I did it on a whim. Two modifications have been made to the progress bar. Of course, they are all built-in or supported by uni-app itself. You can read the documentation.
The first normal change the color of the progress bar.
1. According to the official documentation, add: webview-styles="webviewStyles"

<web-view  webview-styles="webviewStyles"  :src="info.url"></web-view>

2. Set the color in data()

data() {
			return {
				webviewStyles: {
                     progress: {
                        color: '#FF3333'
                    }
                }
			};
		},

3 .Look at the picture

#The second type is a relatively advanced loading effect. Look at the picture

1. The implementation code is as follows

<web-view :webview-styles="webviewStyles" :src="info.url"></web-view>
data() {
			return {
				 webviewStyles: {
                     progress: false //必须要设置为false
                }
			};
		},

2. The js code can be written in onload

var pages = getCurrentPages();
	var page = pages[pages.length - 1];
	var currentWebview=page.$getAppWebview();
	setTimeout(function(){
		var web_view= currentWebview.children();
		var w=plus.nativeUI.showWaiting();
		web_view[0].addEventListener("loading",function(){
			w.show();
		},false);
		
		web_view[0].addEventListener("loaded",function(){
			w.close();
			w=null;
		},false);
	},600)

Finally, due to working hours (The boss is here) So if you don’t understand some words, go to Baidu by yourself.

The above is the detailed content of How to set webview color in Uniapp. For more information, please follow other related articles on the PHP Chinese website!