记录微信小程序createIntersectionObserver()方法的使用

这篇具有很好参考价值的文章主要介绍了记录微信小程序createIntersectionObserver()方法的使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

最近做的微信小程序项目涉及到了曝光埋点需求,即页面上某一模块或者某一些模块被滑动显示在屏幕上的时候,需要做相关的埋点记录,想到了之前用过小程序提供的createIntersectionObserver()方法做过滚动渐变处理,所以记录下createIntersectionObserver()的使用方法。

createIntersectionObserver通俗来讲主要是用于帮助监听页面上某一个对象是否与某一参照物相交,大多用来判断某一个对象是否出现在了可视区域。

官方文档地址:IntersectionObserver | 微信开放文档

一. 接口分析

1.创建‘监测’

wx.createIntersectionObserver(Object component, Object options)

Object component 一般为this,也可为null
Object options
thresholds 数值数组,代表相交比例的阈值,可有填写多个,取值范围 [0,1] ,当相交到达该阈值时会触发一次监听回调,默认为[0]。
initialRatio 初始相交比例,如果方法调用时检测到的相交比例与这个值不相等且达到阈值,则会触发一次监听器的回调函数,默认为 0;
observeAll 是否同时观测多个目标节点,默认为 fasle,从这里可以看出可以同时监听多个对象。

2.绑定参照物

这里提供了两个绑定参照物的方法:

IntersectionObserver.relativeTo(string selector, Object margins)

使用选择器指定一个节点,作为参照区域之一。

string selector

通过选择器来选择参照物

类似于css的但只包括:

id(#object)、class(.object)、子元素选择器(.parent > .child)、后代选择器(.parent  .child)、跨自定义组件的后代选择器(.parent >>> .child)以及支持多选择器的并集(#object, .object)

Object margins 用来扩展(或收缩)参照节点布局区域的边界,可以适当的调整触发位置,包括left、right、top、bottom。


​​​​​​​IntersectionObserver.relativeToViewport(Object margins)

指定页面显示区域作为参照区域之一,Object margins同上。

3.设置监听

IntersectionObserver.observe(string targetSelector, function callback)

string targetSelector selector 代表目标模块的选择器,即我需要监听的元素,当它和参考区域相交达到阈值比例时,会触发 callback 回调函数。
function callback

监听相交状态变化的回调函数,返回一个对象:记录微信小程序createIntersectionObserver()方法的使用

4.取消监听

IntersectionObserver.disconnect()

即停止监听,回调函数将不再触发。

二. 简单事例

通过官方提供的事例来稍作修改进行测试,通过方法来检测小球是否滚动到了指定区域:

wxmlcs

<view class="container">
  <view class="page-body">
    <view class="page-section message">
      <text wx:if="{{appear}}">
        小球出现
      </text>
      <text wx:else>
        小球消失
      </text>
    </view>
    <view class="page-section">
      <scroll-view class="scroll-view" scroll-y>
        <view class="scroll-area" style="{{appear ? 'background: #ccc' : ''}}">
          <text class="notice">向下滚动让小球出现</text>
          <view class="filling"></view>
          <view class="ball"></view>
        </view>
      </scroll-view>
    </view>
  </view>
</view>

wxss

.scroll-view {
  height: 400rpx;
  background: #fff;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

.scroll-area {
  height: 1300rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: .5s;
}

.notice {
  margin-top: 150rpx;
}

.ball {
  width: 200rpx;
  height: 200rpx;
  background: #1AAD19;
  border-radius: 50%;
}

.filling {
  height: 400rpx;
}

.message {
  width: 100%;
  display: flex;
  justify-content: center;
}

.message text {
  font-size: 40rpx;
  font-family: -apple-system-font, Helvetica Neue,Helvetica,sans-serif;
}

 js

Page({
  data: {
    appear: false
  },
  onLoad() {
    this._observer = wx.createIntersectionObserver(this)
    this._observer
      .relativeTo('.scroll-view')
      .observe('.ball', (res) => {
        console.log(res);
        this.setData({
          appear: res.intersectionRatio > 0
        })
      })
  },
  onUnload() {
    if (this._observer) this._observer.disconnect()
  }
})

这个案例中红框内支持scroll-y上下滚动,且正中间有一个绿色小球,通过滚动操作监听绿色小球是否显示在红框内:

记录微信小程序createIntersectionObserver()方法的使用

通过继续滚动,直到小球出现,发现会触发显示后调:

记录微信小程序createIntersectionObserver()方法的使用

 继续滚动直到小球消失,发现会触发消失后调:

记录微信小程序createIntersectionObserver()方法的使用

 监听多个的情况呢?首先我们来改一下代码,这里设置3种颜色的小球,同时为他们每一个球设置一个标题,希望在‘我’这个球显示的时候显示‘我’自己的标题,都没有显示则标题为‘啥也不是’:

wxml

<view class="container">
  <view class="page-body">
    <view class="page-section message">
      <text>
        {{title}}
      </text>
    </view>
    <view class="page-section">
      <scroll-view class="scroll-view" scroll-y>
        <view class="scroll-area" style="{{appear ? 'background: #ccc' : ''}}">
          <text class="notice">向下滚动让小球出现</text>
          <view class="filling"></view>
          <view class="ball green" data-item="我是小绿"></view>
          <view class="filling"></view>
          <view class="ball red" data-item="我是小红"></view>
          <view class="filling"></view>
          <view class="ball yellow" data-item="我是小黄"></view>
        </view>
      </scroll-view>
    </view>
  </view>
</view>

wxss

.scroll-view {
  height: 400rpx;
  background: #fff;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

.scroll-area {
  height: 2800rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: .5s;
}

.notice {
  margin-top: 150rpx;
}

.ball {
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
}

.green{
  background: #1AAD19;
}

.red{
  background: #ff0000;
}

.yellow{
  background: #fffb00;
}

.filling {
  height: 600rpx;
}

.message {
  width: 100%;
  display: flex;
  justify-content: center;
}

.message text {
  font-size: 40rpx;
  font-family: -apple-system-font, Helvetica Neue,Helvetica,sans-serif;
}

js

Page({
  data: {
    title: "啥也不是"
  },
  onLoad() {
    this._observer = wx.createIntersectionObserver(this,{observeAll:true})
    this._observer
      .relativeTo('.scroll-view')
      .observe('.ball', (res) => {
        console.log(res);
        if(res.intersectionRatio){
          this.setData({
            title: res.dataset.item
          })
        }else{
          this.setData({
            title: "啥也不是"
          })
        }
      })
  },
  onUnload() {
    if (this._observer) this._observer.disconnect()
  }
})

最后效果:

记录微信小程序createIntersectionObserver()方法的使用

记录微信小程序createIntersectionObserver()方法的使用 

记录微信小程序createIntersectionObserver()方法的使用 

 最后需要注意一下,observerAll 只能观测已经存在的元素,假如是动态加载列表,则无法观测到之后添加的元素,这种情况与元素渲染的慢的情况可以通过设置setTimeout来等待元素渲染完成后开始监听,最后不需要的记得disconnect()。文章来源地址https://www.toymoban.com/news/detail-483009.html

到了这里,关于记录微信小程序createIntersectionObserver()方法的使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序使用lime-echart踩坑记录

    微信小程序项目使用的是uni-app,插件是 lime-echart ,版本一开始安装的是 lime-echart-0.7.9 ;在项目分包之后,为了避免主包过大,就将这个插件也一并搬到了分包中,在微信开发者工具中表现出来的问题,在切到分包所在的模块时,就会导致页面报错,错误信息如下: 在开发时

    2024年02月09日
    浏览(68)
  • uniapp 微信小程序 editor富文本编辑器 api 使用记录

    这里记录一下自己研究学习的结果 之前一直使用textarea 来进行内容的编辑。但是局限性还是太多,最近发现了editor。觉得很不错 uniapp的官方说明 https://uniapp.dcloud.io/component/editor.html 这里有个例子,看起来很棒。但是自己使用起来的时候, 怎么也没有官方demo上面的工具栏 !

    2024年02月09日
    浏览(43)
  • bug记录:微信小程序 给button使用all: initial重置样式

    场景:通过uniapp开发微信小程序 ,使用uview的u-popup弹窗,里面内嵌了一个原生button标签,因为微信小程序的button是有默认样式的,所以通过all: initial重置样式 。但是整个弹窗的点击事件都会被button上面的点击事件覆盖,也就是说点击弹窗任何一个地方,都会触发button的点击

    2024年02月11日
    浏览(46)
  • 微信小程序中使用echarts方法

    echarts是一个基于JS的数据可视化图标库,它提供了直观,生动,可交互,可个性定制的数据可视化图表。一般在vue中会使用到,并且官网也详细的说明了如何在vue中使用,但是今天我想来探讨的是,如何在 微信小程序中使用echarts : 1. ec-canvas的github仓库 官网中介绍到:echa

    2024年02月15日
    浏览(52)
  • 微信小程序 uCharts的使用方法

    微信小程序项目需要渲染一个柱状图,使用uCharts组件完成 uCharts官网指引👉:uCharts官网 - 秋云uCharts跨平台图表库 进入官网查看指南,有两种方式进行使用:分别是原生方式与组件方式 第一步:获取u-charts.js 获取方式一:通过码云 uCharts 项目开源地址获取 u-charts.js https://g

    2024年02月05日
    浏览(42)
  • 微信小程序半屏小程序的使用方法

    目录 一、微信拉起半屏API: 二、使用限制  三、解决使用限制 一、微信拉起半屏API: 二、使用限制 微信有规定的使用限制!!!!!!! 使用过程有以下限制,若不符合以下所有条件将被自动切换为普通的小程序跳转小程序,不影响用户使用: 被半屏跳转的小程序需要通

    2024年02月04日
    浏览(29)
  • 微信小程序里使用SVG矢量图标方法

    微信小程序里使用SVG矢量图标有2种引入方法: 一、SVG图标转换为BASE64编码 可以在百度搜索’svg在线转BASE64’(可能会有问题,如下) 如下方式 同时还需要添加 background-size: contain 属性使图标能根据元素大小自动缩放 二、使用运程地址引入SVG图标 把SVG图标上传到网站服务器

    2024年02月05日
    浏览(52)
  • 记录微信小程序使用Vant Weapp-Sidebar 侧边导航,更改它的边框颜色

    因为组件自带的颜色是红色,不符合项目的需求,直接用是这样的,如图: 但是在他的官方给出的参数中没有直接能变更颜色的参数,下面是它定义边框颜色的名字,我们只需要在自己的Wxss文件里重写一下这个class就可以了,代码如下: wxml文件: wxss文件: 现在运行就会是

    2024年02月13日
    浏览(54)
  • 微信小程序使用image组件显示图片的方法

    本文实例讲述了微信小程序使用image组件显示图片的方法。分享给大家供大家参考,具体如下: 1、效果展示 2、关键代码 ① index.wxml 代码如下: image style=\\\"width: 300px; height: 300px; margin:10px;\\\" mode=\\\"scaleToFill\\\" src=\\\"{{imageSrc}}\\\"/image ② index.js Page({ data:{ // text:\\\"这是一个页面\\\" imageSrc:\\\'../..

    2024年02月12日
    浏览(88)
  • 微信小程序setData注意事项,使用方法

    1..微信小程序开发中,为了减少data和视图层数据表现不一致,全部采用setData方法修改值。 setData函数注意事项 1..直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的,还会造成数据不一致。 2..单次设罟的数据不能超过1024kB,请尽量避免一次设罟过多的数据, 3..请

    2024年02月16日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包