微信小程序中实现屏幕滚动到当前视频，自动播放该视频

实现的效果如下图所示
文章的末尾我分享了一个代码片段出来，如果各位老铁有好的建议给我说一下

首先是布局
1、
当前播放视频在页面是唯一渲染出来的，小程序官方建议视频组件在页面上，最多不超过3个
其它没有播放的视频，用视频图片来代替

<view class="shipin-list" wx:for='{{arrList}}' wx:key='index' >
  <view class="shipin-neirong">
    <!-- 视频图片层 -->
    <view data-id="{{index}}" class="video-image-box" 
      style="display: {{ _index == index ? 'none' : 'block' }};" 
      bindtap="videoPlay"
    >
      <view class="video-cover-box">
        <image class="video-image" src="{{item.cover}}" mode="aspectFit">
        </image>
      </view>
      <!-- 播放按钮 -->
      <image class="video-image-play" src="/images/bofang.png" mode="scaleToFill"></image>
    </view> 
    
    <!-- 视频 -->
    <video src="{{item.url}}"  autoplay='true' data-id="{{index}}" 
      wx:if="{{_index == index}}"  show-fullscreen-btn="false" 
    />
  </view>
</view>

2、JS部分
首先要获取每个视频距离顶部的高度，当页面滚动到当前区间时，将视频组件渲染出来

let meigeSP=[] //每个视频的距离顶部的高度
let distance=0 //标记页面是向下还是向上滚动
let indexKey=0 //标记当前滚动到那个视频了
//获取每个视频的距离顶部的高度
  spHeight() { 
    //微信api获取节点
    let query = wx.createSelectorQuery();
    query.selectAll('.shipin-list').boundingClientRect() 
    query.exec((rect) => {
      console.log(rect, 222)
      rect[0].forEach(item => {
        meigeSP.push(item.top)
      })
    })
  }

获取到每个视频距离顶部的高度后，监听页面滚动
当页面滚动到当前视频时，将视频渲染出来

//页面滚动触发
  onPageScroll(event) {
    //console.log(meigeSP,11) //每个视频距离顶部的高度 
    let scrollTop = event.scrollTop //页面滚动
    if (scrollTop==0){
      indexKey=0
      this.setData({ _index:indexKey})
    }

    console.log(scrollTop)
    if (scrollTop >= distance) { //页面向上滚动indexKey
      if (indexKey + 1 < meigeSP.length && scrollTop >= meigeSP[indexKey] * 0.9) {
        this.setData({ _index: indexKey + 1 })
        indexKey += 1
        console.log("indexKey", indexKey)
      }
    } else { //页面向下滚动
      if (distance - scrollTop < 15) { //每次滚动的距离小于15时不改变  减少setData的次数
        return
      }
      if (indexKey - 1 > 0 && scrollTop < meigeSP[indexKey - 1]) {
        indexKey -= 1
        this.setData({ _index: indexKey })
      }
    }
    distance = scrollTop
  }

大致思路就是这样

小程序代码片段