博客
关于我
小程序 IntersectionObserver 使用案例
阅读量:161 次
发布时间:2019-02-28

本文共 2506 字,大约阅读时间需要 8 分钟。

今天聊聊小程序的 IntersectionObserver 接口。

兼容性

基础信息:

  • 文档: 
  • 兼容: 基础库 > 1.9.3
  • observeAll: 基础库 > 2.0.0

API

通过 IntersectionObserver wx.createIntersectionObserver(Object this, Object options) 创建 IntersectionObserver 对象实例 options 可选配置有

  • thresholds,触发阈值的集合数组,默认 [0],例:我配置了 [0, 0.5, 0.8],那么当监听对象和参照物相交比例达到 0 / 0.5 / 0.8 时,会触发监听器的回调函数
  • initialRatio,初始相交比例,默认 0,达到 initialRatio 或 thresholds 中的阈值时,回调被触发
  • observeAll,是否同时监听多个对象,默认 false,下文的列表埋点会用到(⚠️:基础库 > 2.0.0)

接下来看下 IntersectionObserver 的方法,

  1. disconnect,停止监听

  2. .observe(string targetSelector, function callback),指定监听对象,并且设置回调函数

  • intersectionRatio,这个数据很关键,相交比例,用作临界判断的指标
  • intersectionRect Object{left、right、top、bottom},相交区域的边界
  • boundingClientRect Object{left、right、top、bottom},目标边界
  • relativeRect Object{left、right、top、bottom},参照区域的边界
  • time number 相交检测时的时间戳
  1. .relativeTo(string selector, Object margins),通过选择器指定一个节点作为参照区域之一,而 margins 包括 left / right / top / bottom 可以设置与某一边界的达到一定距离时触发回调

  2. .relativeToViewport(Object margins),指定页面显示区域作为参照区域之一

案例

多数 onScroll 的应用场景都可以被 IntersectionObserver 取代,这里举两个案例。

列表数据监控

场景:商品列表场景下,统计用户访问到第多少个商品离开页面,甚至上报已经看到的商品列表,在这个场景里,需要监听多个对象,并且在列表数据增加时,监听的对象也需要更新

interSection: function (e) {  if (this._observer) {    this._observer.disconnect()  }  this._observer = this.createIntersectionObserver({    // 阈值设置少,避免触发过于频繁导致性能问题    thresholds: [1],    // 监听多个对象    observeAll: true  })    .relativeToViewport({      bottom: 0    })    .observe('.item', (item) => {      let idx = item.dataset && item.dataset.idx      // 获取浏览的最底部元素的 idx      if (idx > this.data.expoIdx) {        this.setData({          expoIdx: idx        })      }    })},getList: function() {  // 列表数据更新后,重新绑定监听  this.setData({    list: newList  }, this.interSection)},logViewCount: function () {  // 上报数据  log(this.data.expoIdx)},onHide: function () {  this.logViewCount()},onUnload() {  if (this._observer) {    // 解绑    this._observer.disconnect()  }}

吸顶效果

小程序无法使用 sticky,我们会通过 scroll-view 的 bindscroll 来实现吸顶效果,但是 bindscroll 实际使用体验并不是很好,不过可以用 IntersectionObserver 来实现。

filterInterSection: function(e) {  this.filterObserver = this.createIntersectionObserver({    thresholds: [0, 0.5, 1]  })    .relativeToViewport()    .observe('.filter-container', (data) => {      if (data.intersectionRatio < 1) {        this.setData({          isFixed: true        })      } else {        this.setData({          isFixed: false        })      }    })},onLoad: function (options) {  this.filterInterSection()},onUnload() {  if(this.filterInterSection) {    this.filterInterSection.disconnect()  }}

 

 

转载地址:http://oiod.baihongyu.com/

你可能感兴趣的文章
Mysql之索引选择及优化
查看>>
mysql之联合查询UNION
查看>>
mysql之连接查询,多表连接
查看>>
mysql乐观锁总结和实践 - 青葱岁月 - ITeye博客
查看>>
mysql也能注册到eureka_SpringCloud如何向Eureka中进行注册微服务-百度经验
查看>>
mysql乱码
查看>>
Mysql事务。开启事务、脏读、不可重复读、幻读、隔离级别
查看>>
MySQL事务与锁详解
查看>>
MySQL事务原理以及MVCC详解
查看>>
MySQL事务及其特性与锁机制
查看>>
mysql事务理解
查看>>
MySQL事务详解结合MVCC机制的理解
查看>>
MySQL事务隔离级别:读未提交、读已提交、可重复读和串行
查看>>
MySQL事务隔离级别:读未提交、读已提交、可重复读和串行
查看>>
webpack css文件处理
查看>>
mysql二进制包安装和遇到的问题
查看>>
MySql二进制日志的应用及恢復
查看>>
mysql互换表中两列数据方法
查看>>
mysql五补充部分:SQL逻辑查询语句执行顺序
查看>>
mysql交互式连接&非交互式连接
查看>>