iOS:WKWebView的進(jìn)度條加載

先看效果圖:
進(jìn)度條加載.gif
下面是代碼(測(cè)試環(huán)境:Xcode8.2.1,模擬器是iPhone7,iOS10.2)

1:導(dǎo)入頭文件
import <WebKit/WebKit.h> @property (strong, nonatomic) WKWebView *webView; @property (strong, nonatomic) UIProgressView *progressView;

** 2:初始化**
// 創(chuàng)建urlrequest11111 NSURL *url = [NSURL URLWithString:@"http://www.reibang.com/"]; NSURLRequest *request = [NSURLRequest requestWithURL:url]; // WKWebView初始化 self.webView = [[WKWebView alloc] initWithFrame:self.view.frame]; // 加載請(qǐng)求 [self.webView loadRequest:request]; [self.view addSubview:self.webView]; // KVO塔嬉,監(jiān)聽(tīng)webView屬性值得變化(estimatedProgress,title為特定的key) [self.webView addObserver:self forKeyPath:@"estimatedProgress" options:NSKeyValueObservingOptionNew context:nil]; [self.webView addObserver:self forKeyPath:@"title" options:NSKeyValueObservingOptionNew context:nil]; // UIProgressView初始化 self.progressView = [[UIProgressView alloc] initWithProgressViewStyle:UIProgressViewStyleDefault]; self.progressView.frame = CGRectMake(0, 0, self.webView.frame.size.width, 2); self.progressView.trackTintColor = [UIColor clearColor]; // 設(shè)置進(jìn)度條的色彩 self.progressView.progressTintColor = [UIColor magentaColor]; // 設(shè)置初始的進(jìn)度,防止用戶(hù)進(jìn)來(lái)就懵逼了(微信大概也是一開(kāi)始設(shè)置的10%的默認(rèn)值) [self.progressView setProgress:0.1 animated:YES]; [self.webView addSubview:self.progressView];

3:完成監(jiān)聽(tīng)方法
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context { if ([object isEqual:self.webView] && [keyPath isEqualToString:@"estimatedProgress"]) { // 進(jìn)度條 CGFloat newprogress = [[change objectForKey:NSKeyValueChangeNewKey] doubleValue]; NSLog(@"打印測(cè)試進(jìn)度值:%f", newprogress); if (newprogress == 1) { // 加載完成 // 首先加載到頭 [self.progressView setProgress:newprogress animated:YES]; // 之后0.3秒延遲隱藏 __weak typeof(self) weakSelf = self; dispatch_after(dispatch_time(DISPATCH_TIME_NOW, 0.3 * NSEC_PER_SEC), dispatch_get_main_queue(), ^{ weakSelf.progressView.hidden = YES; [weakSelf.progressView setProgress:0 animated:NO]; }); } else { // 加載中 self.progressView.hidden = NO; [self.progressView setProgress:newprogress animated:YES]; } } else if ([object isEqual:self.webView] && [keyPath isEqualToString:@"title"]) { // 標(biāo)題 self.title = self.webView.title; } else { // 其他 [super observeValueForKeyPath:keyPath ofObject:object change:change context:context]; } }

Demo地址:https://github.com/ACMango/WKWebViewDemo

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末租悄,一起剝皮案震驚了整個(gè)濱河市谨究,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌泣棋,老刑警劉巖胶哲,帶你破解...
    沈念sama閱讀 217,406評(píng)論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異潭辈,居然都是意外死亡鸯屿,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,732評(píng)論 3 393
  • 文/潘曉璐 我一進(jìn)店門(mén)把敢,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)寄摆,“玉大人,你說(shuō)我怎么就攤上這事修赞∩裟眨” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 163,711評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵柏副,是天一觀(guān)的道長(zhǎng)勾邦。 經(jīng)常有香客問(wèn)我,道長(zhǎng)割择,這世上最難降的妖魔是什么眷篇? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,380評(píng)論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮荔泳,結(jié)果婚禮上蕉饼,老公的妹妹穿的比我還像新娘。我一直安慰自己玛歌,他們只是感情好椎椰,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,432評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著沾鳄,像睡著了一般慨飘。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 51,301評(píng)論 1 301
  • 那天瓤的,我揣著相機(jī)與錄音休弃,去河邊找鬼。 笑死圈膏,一個(gè)胖子當(dāng)著我的面吹牛塔猾,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播稽坤,決...
    沈念sama閱讀 40,145評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼丈甸,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了尿褪?” 一聲冷哼從身側(cè)響起睦擂,我...
    開(kāi)封第一講書(shū)人閱讀 39,008評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎杖玲,沒(méi)想到半個(gè)月后顿仇,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,443評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡摆马,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,649評(píng)論 3 334
  • 正文 我和宋清朗相戀三年臼闻,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片囤采。...
    茶點(diǎn)故事閱讀 39,795評(píng)論 1 347
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡述呐,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出蕉毯,到底是詐尸還是另有隱情市埋,我是刑警寧澤,帶...
    沈念sama閱讀 35,501評(píng)論 5 345
  • 正文 年R本政府宣布恕刘,位于F島的核電站缤谎,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏褐着。R本人自食惡果不足惜坷澡,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,119評(píng)論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望含蓉。 院中可真熱鬧频敛,春花似錦、人聲如沸馅扣。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,731評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)差油。三九已至拗军,卻和暖如春任洞,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背发侵。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,865評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工交掏, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人刃鳄。 一個(gè)月前我還...
    沈念sama閱讀 47,899評(píng)論 2 370
  • 正文 我出身青樓盅弛,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親叔锐。 傳聞我的和親對(duì)象是個(gè)殘疾皇子挪鹏,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,724評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容