Uso detallado de WeChat Mini Program IntersectionObserver

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

.scroll-view { 
  altura : 400rpx ; 
  fondo : #fff ; 
  borde : 1px sólido #ccc ; 
  tamaño de la caja : border-box ; 
} 

.scroll-area { 
  height : 1300rpx ; 
  pantalla : flex ; 
  dirección flexible : columna ; 
  alinear elementos : centro ; 
  transición : .5s ; 
} 

.notice { 
  margin-top :150rpx ; 
} 

.ball { 
  ancho : 200rpx ; 
  altura : 200rpx ; 
  fondo : # 1AAD19 ; 
  radio de borde : 50% ; 
} 

.filling { 
  altura : 400rpx ; 
} 

.message { 
  ancho : 100% ; 
  pantalla : flex ; 
  justify-content : centro ; 
} 

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

Página ({ 
  datos: { 
    aparecer: falso 
  }, 
  onLoad () { 
    this ._observer = wx.createIntersectionObserver ( this )
     this ._observer 
      .relativeTo ( '.scroll-view' ) 
      .observe ( '.ball', (res) = > { 
        console.log (res); 
        this .setData ({ 
          aparece: res.intersectionRatio > 0 
        }) 
      }) 
  }, 
  onUnload () { 
    if ( this ._observer) this ._observer.disconnect () 
  } 
})

 

1, boundingClientRect : límite objetivo. Este objetivo, que es nuestro objeto de observación, puede ver su posición cuando comienza a cruzarse por primera vez. Esta posición es relativa a toda la página, no al elemento de referencia. top = 251 (px) = altura de la vista de desplazamiento (200px) + altura del mensaje "pequeña bola desaparece / aparece" (52px) - altura de intersección (1px)
2, conjunto de datos : los datos transportados por el objeto de observación.
3, id : el id del objeto de observación, que se utiliza en la escena de observación de varios objetos a la vez con el conjunto de datos anterior para distinguir diferentes objetos.
4. intersectionRatio : si es mayor que 0, significa que los dos tienen una intersección. Si es 1, significa que los dos se han cruzado por completo.
5. intersectionRect intersection area: Se puede ver que solo 1px de altura tiene intersección en este momento.
6, relativeRect : límite del área de referencia. Se puede ver a partir de los cuatro valores de atributo de arriba, abajo, izquierda y derecha que es la posición del componente de vista de desplazamiento en la página.
7. hora : la marca de tiempo cuando se detectan las dos intersecciones, lo que no es muy útil.

Dirección de referencia: https://blog.csdn.net/qq_25324335/article/details/83687695