当前位置:主页 > 动态 >

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 Yuga Labs:成功救回价值57万美元NFT

消息,Yuga Labs宣布成功救回约57万美元的NFT,此次救援是在周日Floor Protocol发生漏洞后进行的。...

2 未知钱包转入5000万枚XRP,价值约5914万美

消息,据Whale Alert监测,未知钱包刚刚转入50,000,000枚XRP,按实时价格计算约合59,140,032美元。...

3 代币化股票总市值自年初增至55亿美元

消息,代币化股票总市值自年初的22.3亿美元增至55亿美元,六个月增长约147%,成为仅次于私募...

4 重仓布局三大市场:巨鲸减持400枚ZEC,当

消息,某巨鲸近期减持400枚ZEC,约合205万美元,当前持仓规模为915万美元,均价为400.13美元,...

5 Citrini研究:HyperLiquid被列为新兴投资机会

消息,Citrini研究公司在其最新报告中将加密交易所HyperLiquid及其代币HYPE列为新的引人注目的投...

6 以色列对黎巴嫩南部纳巴提耶省泽夫塔镇

消息,据黎巴嫩卫生部消息,以色列对黎巴嫩南部纳巴提耶省泽夫塔镇的袭击已造成至少7人死...

7 未知钱包转入2.5亿USDC,价值约2499.43万美

消息,据Whale Alert监测,250,000,000枚USDC刚刚转入一个未知钱包。...

8 FTX创始人Sam Bankman

消息,FTX创始人Sam Bankman-Fried已正式向特朗普申请总统特赦,同时继续通过美国上诉程序挑战其...

9 Ledger CTO:欧盟合规成本扼杀Web3创新

消息,Ledger首席技术官Charles Guillemet表示,欧盟的合规成本正在扼杀Web3创新。尽管欧盟的加密...

10 OpenAI Stargate数据中心遭遇能源瓶颈

消息,OpenAI Stargate数据中心开发商因能源挑战成本上升。据两位知情人士以及接受简报的工程...

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

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