小程序实现视频轮播图

小程序实现视频轮播图

方法很简单，跟实现轮播图一样，不过时添加了一个视频，如下图所示

内容很少方便理解，就不多说废话了，直接上代码

.wxml

<swiper class="swiper" indicator-dots="true" circular="true">
  <swiper-item>
    <video id="myVideo" src='{{url}}' bindtap="bofang" controls='true'></video>
  </swiper-item>
  <block wx:for="{{img}}" wx:key="{{img}}">
    <swiper-item>
      <image src="{{item}}" class="slide-image" mode="aspectFill" />
    </swiper-item>
  </block>
</swiper>

.js

Page({
  data: {
    url:"视频地址",
    img:['图片地址','图片地址2']
  },
});

模拟后台传过来的数据来实现视频轮播图，有什么问题欢迎评论留言，我会及时回复你的。