微信小程序轮播视频，切换停止播放

1.wxml代码

<swiper class="banner" indicator-dots="true" autoplay="{{true}}" interval="3000" duration="1000" current="{{0}}" bindchange="onSwiperChange">
    <swiper-item wx:for="{{banner}}" wx:key="id" bindtap="onBannerPreview">
      <block wx:if="{{item.type == 1}}">
        <image src="{{item.url}}" background-size="cover" data-src="{{item.url}}" data-index="{{ index }}" data-type="{{item.type}}"></image>
      </block>
      <block wx:if="{{item.type == 2}}">
        <video id="operate-desc-video" src="{{item.url}}" object-fit="cover" data-src="{{item.url}}" data-type="{{item.type}}" data-index="{{ index }}" style="width: 100%; height: 100%;"></video>
      </block>
    </swiper-item>
  </swiper>

在轮播切换的事件中，处理停止视频播放的逻辑。获取视频“元素”对象，参考微信小程序开发文档。

2.js代码

onSwiperChange(e) {
    const query = wx.createSelectorQuery()
    const nodeRefs = query.selectAll('.banner .operate-desc-video')
    nodeRefs.context(function (res) {
      console.log(res);
      res.forEach(item => {
        item.context.stop()
      })
    }).exec()
  }