createIntersectionObserver同时观察image和video的问题?
js代码 const videoObserve = wx.createIntersectionObserver(this, {observeAll: true})
videoObserve.relativeToViewport({bottom: -topBottomPadding, top: -topBottomPadding})
.observe(`.video`, (res) => {
if (res.intersectionRatio === 0) {
let current = self.data.down ? res.dataset.index + 1 : res.dataset.index - 1
self.setData({
currentVideo: current
})
}
}
})
wxml代码 <image
class="video"
id="vid{{index}}"
data-index="{{index}}"
wx:if="{{currentVideo != index}}"
src="{{ staticHost + item.cover }}"
</image>
<video
wx:else
class="video"
id="vid{{index}}"
data-index="{{index}}"
src="{{staticHost + item.src}}"
autoplay='{{index == 0 ? true : false}}'
bindended="end"
bindwaiting="waiting"
bindtimeupdate="timeupdate"
play-btn-position="center"
poster="{{ staticHost + item.cover }}"
loop="true"
initial-time='{{ item.history.watched_at || 0 }}'
show-fullscreen-btn="{{false}}"
controls>
</video>
目的是滑动屏幕,观察到的自动播放视频,其他则用image代替。 出现的问题:观察的数据中间隔了一个,就是连续播放视频,中间会空一个图片没有观察到。 出现这种情况的原因是什么?