• 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

Uniapp设置webview颜色的方法

武飞扬头像
PHP中文网
帮助110

关于uniapp的webview组件进度条(loading)样式的定义

1.小编最近在学习uni-app。因为项目里面加载了诸多的外部的网页。所以必须要用到webview这件组件。可是有的网址的服务器(别想歪)因为这个网站是一个虚拟币种的交易网站。你懂的。但是在app里面访问这样的网站有往往都需要三四秒的空白期。
网页的进度条还是有的。但是样式太普通。所以小编一时兴起。对进度条进行了两种改装。当然了,都是uni-app本身自带的或支持的。可以看文档的。
第一种普通 改变进度条的颜色。
1.对照官方文档 在webview标签当中增加: webview-styles=“webviewStyles”

<web-view  webview-styles="webviewStyles"  :src="https://www.swvq.com/uni-app/info.url"></web-view>

2.data()当中设置颜色

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

3.看图

学新通技术网

第二种就是相对高级一些的loading效果了。看图
学新通技术网

1.实现代码如下

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

2.js代码可以写在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)

最后因为上班时间关系(老板来了)所以 有些单词不懂的自己去百度吧。

这篇好文章是转载于:学新通技术网

  • 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
  • 本站站名: 学新通技术网
  • 本文地址: /boutique/detail/tanfgcac
系列文章
更多 icon
同类精品
更多 icon
继续加载