vue移动端电影排片轮播（仿淘票票、猫眼）

公司小程序要改成移动端html5，网上找了很久都没有合适的，ui一直是vant ui，element中的跑马灯card效果不好，不能滑动。也用过swipe ui组件，不太好操作，最后还是在vant上下功夫了

效果图

html代码

<van-swipe
  :loop="false"
  :width="swipeWidth"
  :show-indicators="false"
  :initial-swipe="initial"
  @change="onSwipeChange"
>
  //前两个swipe是占位符，因为我们是5个img
  <van-swipe-item></van-swipe-item>
  <van-swipe-item></van-swipe-item>
  //居中的img
  <van-swipe-item v-for="(i, index) in banner" :key="index" @click="swipeIndex(index)" class="swipe_div" >
    //主图，加div原因是为了样式统一
    <div :style="oImg"  class="swipe_div">
      <img :src="i.img" alt="剧照" />
    </div>
    //设置主图遮罩，用于区分是否选中
    <div :class="initial==index?'swipe_div_back_choose':'swipe_div_background'" :style="oImg" ></div>
  </van-swipe-item>
  //后两个swipe是占位符，因为我们是5个img
  <van-swipe-item></van-swipe-item>
  <van-swipe-item></van-swipe-item>
</van-swipe>

js代码

data(){
  return{
  	initial: 0,//轮播图定位位置，默认0
    banner: [],//轮播图片，数据库获取
    oImg: {},   //动态设置轮播图padding，这个可以不考虑
    swipeWidth: parseInt(
      (window.innerWidth ||
        document.documentElement.clientWidth ||
        document.body.clientWidth) / 5
    ), //获取浏览器宽度设置自适应，5个img
  }
},
created() {
  this.img();
},
methods: {
  // 动态设置轮播图宽度
  img() {
    this.oImg = "padding:0px " + (this.swipeWidth - 64) / 2 + "px;";
  },
  // 滑动swipe居中，vant自带的
  onSwipeChange(e) {
    Toast("当前 Swipe 索引：" + e);
    this.initial = e;
  },
  // 点击swipe居中，我们手写的
  swipeIndex(e) {
    Toast("点击索引：" + e);
    this.initial = e;
  },
},

css代码

/* 轮播 */
.schedules_nav .van-swipe {
  background: #404040;
}
.schedules_nav .van-swipe__track {
  margin: 8px 0;
}
.schedules_nav .van-swipe-item .swipe_div {
  width: 64px;
  height: 90px;
}
.schedules_nav .van-swipe-item .swipe_div_back {
  width: 64px;
  height: 90px;
  position: relative;
  top: -90px;
  background: rgba(0, 0, 0, 0.7);
}
.schedules_nav .van-swipe-item .swipe_div_back_choose {
  width: 64px;
  height: 90px;
  position: relative;
  top: -90px;
  background:none;
}
.schedules_nav .van-swipe-item img {
  width: 100%;
  height: 100%;
}

注：动图就不上了，css没添加动画效果，小伙伴们可以自己做动画效果。不懂得可以下方留言，欢迎交流