返回顶部
首页 > 资讯 > 移动开发 >iOS中WKWebView仿微信加载进度条
  • 708
分享到

iOS中WKWebView仿微信加载进度条

iosWKWebView进度条 2022-06-05 14:06:48 708人浏览 独家记忆
摘要

本文实例为大家分享了WKWEBView仿微信加载进度条的具体代码,供大家参考,具体内容如下 WKWebView添加了estimatedProgress属性(double类型),我们可

本文实例为大家分享了WKWEBView仿微信加载进度条的具体代码,供大家参考,具体内容如下

WKWebView添加了estimatedProgress属性(double类型),我们可以利用该属性来设置UIProgressView

github代码仓库上存放的Demo

为页面添加UIProgressView属性


@property (nonatomic, strong) WKWebView *mywebView;
@property (nonatomic, strong) UIProgressView *progressView;//设置加载进度条

懒加载UIProgressView


-(UIProgressView *)progressView{
 if (!_progressView) {
  _progressView     = [[UIProgressView alloc]
           initWithProgressViewStyle:UIProgressViewStyleDefault];
  _progressView.frame    = CGRectMake(0, 64, screen_width, 5);

  [_progressView setTrackTintColor:[UIColor colorWithRed:240.0/255
               green:240.0/255
               blue:240.0/255
               alpha:1.0]];
  _progressView.progressTintColor = [UIColor greenColor];


 }
 return _progressView;
}

在初始化WKWebView时(我是在懒加载时) kvo 添加监控


 [_mywebView addObserver:self
      forKeyPath:NSStringFromSelector(@selector(estimatedProgress))
      options:0
      context:nil];

页面开始加载时,隐藏进度条


//开始加载
-(void)webView:(WKWebView *)webView
 didStartProvisionalNavigation:(WKNavigation *)navigation{
 //开始加载的时候,让进度条显示
 self.progressView.hidden = NO;
}

kvo 监听进度


//kvo 监听进度
-(void)observeValueForKeyPath:(NSString *)keyPath
      ofObject:(id)object
      change:(NSDictionary<NSKeyValueChangeKey,id> *)change
      context:(void *)context{

 if ([keyPath isEqualToString:NSStringFromSelector(@selector(estimatedProgress))]
  && object == self.mywebView) {
  [self.progressView setAlpha:1.0f];
  BOOL animated = self.mywebView.estimatedProgress > self.progressView.progress;
  [self.progressView setProgress:self.mywebView.estimatedProgress
        animated:animated];

  if (self.mywebView.estimatedProgress >= 1.0f) {
   [UIView animateWithDuration:0.3f
         delay:0.3f
        options:UIViewAnimationOptionCurveEaseOut
        animations:^{
         [self.progressView setAlpha:0.0f];
        }
        completion:^(BOOL finished) {
         [self.progressView setProgress:0.0f animated:NO];
        }];
  }
 }else{
  [super observeValueForKeyPath:keyPath
        ofObject:object
        change:change
        context:context];
 }
}

在dealloc方法里移除监听


-(void)dealloc{
 [self.mywebView removeObserver:self
      forKeyPath:NSStringFromSelector(@selector(estimatedProgress))];
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

--结束END--

本文标题: iOS中WKWebView仿微信加载进度条

本文链接: https://lsjlt.com/news/30319.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • iOS中WKWebView仿微信加载进度条
    本文实例为大家分享了WKWebView仿微信加载进度条的具体代码,供大家参考,具体内容如下 WKWebView添加了estimatedProgress属性(double类型),我们可...
    99+
    2022-06-05
    ios WKWebView 进度条
  • Android仿IOS ViewPager滑动进度条
    最近做项目,碰到如下的需求:ViewPager分页,如果是6页(包括6页)就用圆点,如果是6页以上就用进度条来切换。前面一种交互方法最常见,用小圆点来表示当前选中的页面,这些小...
    99+
    2022-06-06
    进度条 viewpager IOS Android
  • Android开发之模仿微信打开网页的进度条效果(高仿)
    一,为什么说是真正的高仿?   阐述这个问题前,先说下之前网上的,各位可以复制这段字,去百度一下  "仿微信打开网页的进度条效果" ,你会看到有很多类似的文章,不过...
    99+
    2022-06-06
    仿微信 进度条 android开发 Android
  • 微信小程序怎样实现下载进度条
    这篇文章主要介绍了微信小程序怎样实现下载进度条,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。效果:progress进度条是微信小程序的组件,...
    99+
    2024-04-02
  • iOS使用WKWebView加载HTML5不显示屏幕宽度的问题解决
    最近在项目中我们的商品详情页是一个后台返回的图片标签。需要我们自己去写一个HTML5标签进行整合,(相当于重新写了一个HTML页面) :ok_hand:那就没办法了,我就自己写一个标...
    99+
    2022-05-30
    iOS WKWebView 加载 HTML5
  • ajax中怎么提交加载进度条
    这篇文章将为大家详细讲解有关ajax中怎么提交加载进度条,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。在jsp页面中加入 样式 复制代码 代码如下:.pro...
    99+
    2024-04-02
  • Vue 中怎么惰性加载加一个进度条
    本篇文章为大家展示了Vue 中怎么惰性加载加一个进度条,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。为什么要按需加载Vue.js 中 SPA  的典型工作...
    99+
    2024-04-02
  • vue页面加载进度条组件
    小编给大家分享一下vue页面加载进度条组件,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!页面加载进度条最初我是在youtube上...
    99+
    2024-04-02
  • Ajax如何实现加载进度条
    这篇文章将为大家详细讲解有关Ajax如何实现加载进度条,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。ajax beforeSend:先说说这个 beforeSend, 在请求发送前执行 比如 可以判断用户...
    99+
    2023-06-08
  • AmazeUI如何实现加载进度条
    小编给大家分享一下AmazeUI如何实现加载进度条,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!AmazeUI 加载进度条的实现示例,具体如下:<!doct...
    99+
    2023-06-09
  • 原生JS实现加载进度条
    本文分享一个原生JS实现的动态加载进度条特效,效果如下: 实现的代码如下: <!DOCTYPE html> <html> <head> ...
    99+
    2024-04-02
  • JavaScriptcanvas绘制圆形加载进度条
    本文实例为大家分享了JavaScript canvas绘制圆形加载进度条的具体代码,供大家参考,具体内容如下 1.需求:通过canvas绘制一个圆形的进度条 2.实现思路: 2.1 ...
    99+
    2024-04-02
  • Android Material加载进度条制作代码
    最近看了几款APP的加载进度都是这种风格,感觉还不错,在网上找了一些资料,自己小练兵了一把: 主要运用的开源框架: /ViewPagerIndicator_library&n...
    99+
    2022-06-06
    进度条 material Android
  • Android实现简单的加载进度条
    本文实例为大家分享了Android实现简单的加载进度条的具体代码,供大家参考,具体内容如下 1.效果图 2.自定义progressBar package com.example...
    99+
    2024-04-02
  • Android仿微信进度弹出框的实现方法
    MainActivity: package com.ruru.dialogproject; import android.app.Activity; import and...
    99+
    2022-06-06
    方法 Android
  • 微信小程序进度条怎么实现
    这篇文章主要介绍“微信小程序进度条怎么实现”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“微信小程序进度条怎么实现”文章能帮助大家解决问题。progress进度条。属性名类型默认值说明percentF...
    99+
    2023-06-26
  • 微信小程序实现环形进度条
    本文实例为大家分享了微信小程序实现环形进度条的具体代码,供大家参考,具体内容如下 index.wxss .circle {   position: absolute;   left:...
    99+
    2024-04-02
  • 微信小程序实现圆心进度条
    本文实例为大家分享了微信小程序实现圆心进度条的具体代码,供大家参考,具体内容如下 一、创建项目结构 打开微信开发者工具创建一个项目, 新建 与 pages 同级目录 componen...
    99+
    2024-04-02
  • Android如何实现仿微信Viewpager-Fragment惰性加载
    这篇文章将为大家详细讲解有关Android如何实现仿微信Viewpager-Fragment惰性加载,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。效果如图:什么是lazy-loading呢?顾名思义就是在...
    99+
    2023-05-30
    android
  • 微信小程序中如何实现圆形进度条
    这篇文章主要为大家展示了“微信小程序中如何实现圆形进度条”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“微信小程序中如何实现圆形进度条”这篇文章吧。需求概要小程序...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作