博客
关于我
小程序 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中interactive_timeout和wait_timeout的区别
查看>>
mysql中int、bigint、smallint 和 tinyint的区别、char和varchar的区别详细介绍
查看>>
mysql中json_extract的使用方法
查看>>
mysql中json_extract的使用方法
查看>>
mysql中kill掉所有锁表的进程
查看>>
mysql中like % %模糊查询
查看>>
MySql中mvcc学习记录
查看>>
mysql中null和空字符串的区别与问题!
查看>>
MySQL中ON DUPLICATE KEY UPDATE的介绍与使用、批量更新、存在即更新不存在则插入
查看>>
MYSQL中TINYINT的取值范围
查看>>
MySQL中UPDATE语句的神奇技巧,让你操作数据库如虎添翼!
查看>>
Mysql中varchar类型数字排序不对踩坑记录
查看>>
MySQL中一条SQL语句到底是如何执行的呢?
查看>>
MySQL中你必须知道的10件事,1.5万字!
查看>>
MySQL中使用IN()查询到底走不走索引?
查看>>
Mysql中使用存储过程插入decimal和时间数据递增的模拟数据
查看>>
MySql中关于geometry类型的数据_空的时候如何插入处理_需用null_空字符串插入会报错_Cannot get geometry object from dat---MySql工作笔记003
查看>>
mysql中出现Incorrect DECIMAL value: '0' for column '' at row -1错误解决方案
查看>>
mysql中出现Unit mysql.service could not be found 的解决方法
查看>>
mysql中出现update-alternatives: 错误: 候选项路径 /etc/mysql/mysql.cnf 不存在 dpkg: 处理软件包 mysql-server-8.0的解决方法(全)
查看>>