一朝丢失一朝求：揭秘抖音小程序组件冒泡事件始末

2024-01-18 09:32:51

引子：揭秘抖音小程序组件冒泡事件始末

大家好，欢迎来到本期技术新风向。本期我们来聊一聊抖音小程序组件中神秘丢失的冒泡事件。这是一个非常有趣的问题，也困扰了很多开发者。我们先来看一个例子：

Page({
  data: {
    isPause: false,
  },
  playVideo: function() {
    this.setData({
      isPause: false,
    })
  },
  pauseVideo: function() {
    this.setData({
      isPause: true,
    })
  },
})

这是一个非常简单的抖音小程序组件，它包含了一个视频播放器。当用户点击“播放”按钮时，视频开始播放；当用户点击“暂停”按钮时，视频暂停播放。

但是，当我们把这个组件放到一个页面中时，我们发现了一个奇怪的现象：当用户在视频播放器上点击时，页面上的其他组件也会收到点击事件。

这显然是不正常的，因为视频播放器是一个独立的组件，它不应该影响页面上的其他组件。我们对这个问题进行了调查，最终发现这是一个抖音小程序的bug。

解决方法：实现小程序内视频滚动播放

为了解决这个问题，我们需要在抖音小程序中实现视频滚动播放。视频滚动播放是指视频在页面中自动播放，并且当用户滚动页面时，视频会跟随页面滚动。

实现视频滚动播放的方法有很多，其中一种方法是使用原生组件。

Page({
  data: {
    isPause: false,
  },
  playVideo: function() {
    this.setData({
      isPause: false,
    })
  },
  pauseVideo: function() {
    this.setData({
      isPause: true,
    })
  },
  bindscroll: function(e) {
    if (e.detail.scrollTop > 100) {
      this.setData({
        isPause: true,
      })
    } else {
      this.setData({
        isPause: false,
      })
    }
  },
})