intersection-observer.js 774 B

123456789101112131415161718192021222324252627282930313233343536
  1. Page({
  2. onShareAppMessage() {
  3. return {
  4. title: 'WXML节点布局相交状态',
  5. path: 'packageAPI/pages/page/intersection-observer/intersection-observer'
  6. }
  7. },
  8. data: {
  9. theme: 'light',
  10. appear: false
  11. },
  12. onLoad() {
  13. this.setData({
  14. theme: wx.getSystemInfoSync().theme || 'light'
  15. })
  16. if (wx.onThemeChange) {
  17. wx.onThemeChange(({theme}) => {
  18. this.setData({theme})
  19. })
  20. }
  21. this._observer = wx.createIntersectionObserver(this)
  22. this._observer
  23. .relativeTo('.scroll-view')
  24. .observe('.ball', (res) => {
  25. console.log(res)
  26. this.setData({
  27. appear: res.intersectionRatio > 0
  28. })
  29. })
  30. },
  31. onUnload() {
  32. if (this._observer) this._observer.disconnect()
  33. }
  34. })