当前位置:主页 > 动态 >

Uniapp设置webview颜色的方法

时间:2020-12-20 21:16:51

  Uniapp设置webview颜色的方法:首先在webview标签中增加“webview-styles=“webviewStyles””;然后在“data()”中设置颜色即可。

  本教程操作环境:Windows7系统、uni-app2.5.1版本,该方法适用于所有品牌电脑。

  (免费):uni-app开发教程

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

  

 

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

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

  2.data()当中设置颜色
 

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

  3.看图
 

  第二种就是相对高级一些的loading效果了。看图
 

  1.实现代码如下

  <web-view :webview-styles="webviewStyles" :src="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)

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

热点推荐
1 Cardano生态系统过去一周迎来多项重大进展

消息,Cardano生态系统在过去一周经历了多项重大进展,包括6月23日正式推出的Leios公共测试网...

2 ethlabs发布与以太坊基金会互补合作关系

消息,以太坊非营利研发组织ethlabs发布FAQ,称与以太坊基金会为互补协作关系,而非竞争。...

3 Grayscale:若CLARITY法案停滞且美联储加息,

若CLARITY法案停滞且美联储加息,比特币可能会进一步下跌。Grayscale的研究负责人Zach Pandl表示,...

4 Crypto News Today (June 29):BTC再次失守$60K,欧

6月29日,加密货币市场再次面临压力,比特币再次跌破60,000美元,当前交易价格约为60,200美元...

5 OKX世界杯预测活动新增8场独立奖池,总价

消息,OKX世界杯预测活动本周为8场赛事新增独立奖池,涵盖ZAMA、USDT、OFC、AI等多币种奖励,由...

6 经纬天地推出人工智能及算力服务平台“

消息,经纬天地(宣布正式推出人工智能及算力服务平台NovaxAI。该平台标志着集团AI策略升级...

7 交易者0x2ea2开设ansem空单,浮盈1986美元

消息,据Lookonchain监测,交易者0x2ea2在Aster上线ansem永续合约,价格为0.12美元,开设了8万枚an...

8 币安和OKX年内最大流入达55万枚BTC

消息,分析师Darkfost在X平台发文称,55万枚BTC流入币安和OKX相关充值地址,创年内最大流入规模...

9 野村:市场对汇市干预警惕性升温,美元

消息,野村全球外汇策略团队的四位分析师在一份研究报告中表示,由于市场对日本当局可能...

10 针对此前的停火违规行为

消息,以色列国防军:针对此前的停火违规行为,打击了位于黎巴嫩南部纳巴提耶和梅法东的...

成都来彰科技 蜀ICP备2025134723号-1

资讯来源互联网,如有版权问题请联系管理员删除。