Swift 使用 Observe 监测页面滚动的实现方法

Swift 以前是通过addObserver来实现对某个属性的变化监听，而最新的变化，书写起开更加方便。

observer = test.observe(\.field, options: [.new, .initial]) { (object, change) in
   print(change)
  }

一定要用属性赋值当前的 observe 结果，没有的话可能会造成 change 不生效。

对 UIScrollView 的滚动监听，我们可以使用UIScrollViewDelegate

extension UIScrollViewDelegate{
 func scrollViewDidScroll(scrollView: UIScrollView){
  //do something
 }
}

这里推荐使用 Observe 比较方便的是可以进行模块的逻辑的拆分，我们只需在自己的组件里面进行监听

class ComponetView: UIVIew {
	private var observation: NSKeyValueObservation?
	init(targetView: UIView) {
		observation = targetView.observe(\.contentOffset, options: [.new]) { [weak self] scrollView, change in
   // handle data contentOffset
  }
	}
}

附录：Swift中实现Observable机制

今天给别人讲个Observable的实现和使用场景，结合Observable-Swiftgithub:https://github.com/slazyk/Observable-Swift讲了半天貌似还没有特别明白，故写了个简易的实现，讲述了下Observable属性监控机制。

//: Playground - noun: a place where people can play

import UIKit
import Foundation

// MARK: - Observable
class Observable<T> {
  // 定义block结构
  typealias Observer = T -> Void

  // 申明一个block，用于数据改变的执行
  private var observer: Observer?

  // 数据发生变更，则通过observer告知
  var value: T {
    didSet {
      observer?(value)
    }
  }

  init(_ v: T) {
    value = v
  }

  func observe(observer: Observer?) {
    self.observer = observer
    observer?(value)
  }
}

// MARK: - People
struct PeopleModel {
  let firstName: Observable<String>
  let lastName: Observable<String>

  init(firstName: String, lastName: String) {
    self.firstName = Observable(firstName)
    self.lastName = Observable(lastName)
  }
}

// MARK: - Test

// test1
let people = PeopleModel(firstName: "sunny", lastName: "liu")
people.firstName.observe {
  newValue in
  print("firstName changed: \(newValue)")
}
people.lastName.observe {
  print("lastName changed: \($0)")
}
people.firstName.value = "sunny2"
people.lastName.value = "liu2"

// test2
class House {
  let lableHouseName = UILabel()

  init() {

  }

  var people: PeopleModel? {
    didSet {
      people?.firstName.observe{
        [unowned self] in
        self.lableHouseName.text = $0
      }
    }
  }
}

这样貌似容易理解了，O(∩_∩)O哈哈~

总结

到此这篇关于Swift 使用 Observe 监测页面滚动的文章就介绍到这了,更多相关Swift 使用 Observe 监测页面滚动内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • iOScollectionView广告无限滚动实例(Swift实现)

    iOScollectionView广告无限滚动实例(Swift实现)

    今天公司里的实习生跑过来问我一般App上广告的无限滚动是怎么实现的,刚好很久没写博客了,就决定写下了,尽量帮助那些处于刚学iOS的程序猿. 做一个小demo,大概实现效果如下图所示: 基本实现思路: 1. 在你需要放置无限滚动展示数据的地方把他的数据,在原本的基础上把你要展示的数据扩大三倍.(当然扩大两倍也是可以的,三倍的话,比较好演示) // MARK: - 设置数据源 func collectionView(_ collectionView: UICollectionView, number

  • iOS Swift UICollectionView横向分页滚动，cell左右排版问题详解

    iOS Swift UICollectionView横向分页滚动，cell左右排版问题详解

    情况 Swift对于一门新的iOS编程语言,他的崛起是必然的,我们这群老程序员们学习新的技能也是必然的,不接受新技能将被这大群体无情的淘汰. 最近因为工作的需求,在做表情键盘时遇到一个问题,我用UICollectionView来布局表情,使用横向分页滚动,但在最后一页出现了如图所示的情况 情况分析图 是的,现在的item分布就是这个鬼样子 现在想要做的,就是将现在这个鬼样子变成另外一种样子,如图 那怎么办?只好重新布局item了 解决方案 我是自定了一个Layout(LXFChatEmotion

  • 使用Swift实现iOScollectionView广告无限滚动效果(DEMO)

    使用Swift实现iOScollectionView广告无限滚动效果(DEMO)

    今天公司里的实习生跑过来问我一般App上广告的无限滚动是怎么实现的,刚好很久没写博客了,就决定写下了,尽量帮助那些处于刚学iOS的程序猿. 做一个小demo,大概实现效果如下图所示: 基本实现思路: 1. 在你需要放置无限滚动展示数据的地方把他的数据,在原本的基础上把你要展示的数据扩大三倍.(当然扩大两倍也是可以的,三倍的话,比较好演示) // MARK: - 设置数据源 func collectionView(_ collectionView: UICollectionView, number

  • Swift 使用 Observe 监测页面滚动的实现方法

    Swift 以前是通过addObserver来实现对某个属性的变化监听,而最新的变化,书写起开更加方便. observer = test.observe(\.field, options: [.new, .initial]) { (object, change) in print(change) } 一定要用属性赋值当前的 observe 结果,没有的话可能会造成 change 不生效. 对 UIScrollView 的滚动监听,我们可以使用UIScrollViewDelegate extens

  • vue2.0路由切换后页面滚动位置不变BUG的解决方法

    最近项目中遇到这样一个问题,vue切换路由,页面到顶端的滚动距离仍会保持不变. <a href="javascript:;" rel="external nofollow" class="btn btn01" @click="useRightNow">立即试用</a> <router-link class="db" to="/user">个人中心<

  • 小程序中监听页面滚动的几种方法实例

    小程序中监听页面滚动的几种方法实例

    目录 目录 实现效果 下面是Intersection Observer在MDN上的介绍 IntersectionObserver relativeToViewport 接受参数 Object margins observe(string targetSelector, function callback) 参数 Object res 小程序中监听页面的其他方法 page-meta scroll-view 总结 在工作中我们经常遇到需要监听页面中元素位置,当元素超出显示区域或即将显示到页面上,我们

  • JS实现随页面滚动显示/隐藏窗口固定位置元素

    JS实现随页面滚动显示/隐藏窗口固定位置元素

    窗口固定位置显示元素,当页面高度大于某高度,并且页面向下滚动时,显示该元素:当页面位置小于某高度,或者页面向上滚动时,隐藏该元素. 先给大家展示下效果图: 1.html <p id="selected-case-count"><span class='form-control'>已选: <span class="casecount">0</span></span></p> 2.css p#sel

  • 基于jquery实现页面滚动时顶部导航显示隐藏

    基于jquery实现页面滚动时顶部导航显示隐藏

    本文实例讲述了jquery实现页面滚动时顶部导航显示隐藏效果代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: 引入核心文件 <script src="js/jquery/1.11.1/jquery.min.js"></script> 构建html,margint这个div中为了出现滚动条而建,并无实际作用. <div class="top-title">这是顶部导航条</div> <di

  • 详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题

    详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题

    最近做了个项目,其中有一目录功能,发现一个在现代浏览器间的一个bug,或是称之为差异,即页面滚动值(scrollTop)的获取与设定. 在此之前先说一下关于页面元素的坐标获取,这张图的经典性不必再提. 实现滚动到某位置功能 博客目录的一个最主要的功能就是实现点击标题页面滚动,因为我们要滚动到页面某个标题,所以需要计算出滚动这个元素的具体绝对位置,而常用的offsetTop是获取到当前元素与之最近的决定其定位的元素的偏移量,此处不适用. 此处应使用浏览器原生提供的 getBoundingClien

  • jQuery实现页面滚动时层智能浮动定位实例探讨

    jQuery实现页面滚动时层智能浮动定位实例探讨

    各位兄弟可能碰到定位的问题,特别是在博客或者微博上面也会见到这个效果,于是产品人员在策划的时候就会要人家那种效果,,,而苦逼的我们需要去实现,实现实现.....没办法,谁让我们是攻城师呢,攻吧: 效果图如下,滚动条下拉的时候黑色的块TOP为0:固定显示: 代码如下: 复制代码 代码如下: <!DOCTYPE html> <html > <head> <title>jQuery实现页面滚动时层智能浮动定位</title> <meta name

  • vue利用better-scroll实现轮播图与页面滚动详解

    vue利用better-scroll实现轮播图与页面滚动详解

    前言 better-scroll 也很强大,不仅可以做普通的滚动列表,还可以做轮播图.picker 等等...所以本文主要给大家介绍了关于vue用better-scroll实现轮播图与页面滚动的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 1.安装better-scroll 在根目录中package.json的dependencies中添加: "better-scroll": "^0.1.15" 然后 npm i 安装. 2.封装代码

  • JavaScript实现页面滚动图片加载(仿lazyload效果)

    JavaScript实现页面滚动图片加载(仿lazyload效果)

    为什么写这篇文章? 1.优化页面很实用的方法,技术实现不难: 2.搜索了相关内容的文章,好像都是用jQuery的方法,可是如果不用jQuery的站长难道就不能用这种方法了么: 3.做技术分享也是在让更多人帮自己测试,因为这个本人木有在项目中实际用到,都是自己琢磨的,所有如果有问题请大家指出,先谢谢了: 4.这个月的博客还没写: 5.刚好木有工作任务,此时不写更待何时... 现在的页面大多都具有的特点 - 内容丰富,图片较多:像我们经常浏览的淘宝,京东,团购网站之类的(本人网购控,属于一个月不在网

随机推荐