vant swipe 三图一屏

效果图：

需求：

老师布置作业让大伙跟着b站的一个up做一个网易云音乐首页，up用的vue-awesome-swiper做轮播图，我用的vant，在做到“发现好歌单”模块的时候发现vant没有一屏显示多图的效果，于是自己魔改了一些样式凑合一下

思路：

改轮播组件overflow: hiddle为visible，设置轮播组件的宽为三分之一屏宽，轮播组件外包裹一个大盒子overflow: hiddle

代码：

<template>
  <div class="musicList">
    <div class="musicList-top">
      <div class="title">发现好歌单</div>
      <div class="more">查看更多</div>
    </div>
    <van-swipe
      style="width: 2.3rem"
      class="musicList-content"
      :loop="true"
      :show-indicators="false"
      :autoplay="3000"
    >
      <van-swipe-item
        style="margin: 0 0.15rem"
        v-for="(item, key) in mList"
        :key="key"
      >
        <div class="musicList-swipe-item">
          <img class="item-img" :src="item.picUrl" alt="" />
          <p class="item-text">{{ item.name }}</p>
          <p class="item-play-count">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-bofang1"></use>
            </svg>
            {{ getPlayCount(item.playCount) }}
          </p>
        </div>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
import { defineComponent, ref, onMounted } from "vue";
import { getMusicList } from "@/service/api";

export default defineComponent({
  setup() {
    let mList = ref([])
    const getPlayCount = (playCount) => {
      if (playCount >= 10000000) return (playCount / 10000000).toFixed(2) + "亿"
      else if (playCount >= 10000) return (playCount / 10000).toFixed(2) + "万"
      return playCount
    }
    onMounted(() => {
      getMusicList().then((res) => {
        mList.value = res.data.result
        console.log(mList)
      });  
    })
    return {
      mList,
      getPlayCount
    }
  }
});
</script>

<style lang="less" scoped>
.musicList {
  width: 7rem;
  margin: 0 auto;
  overflow: hidden;
  .musicList-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.1rem;
    .title {
      font-weight: 800;
    }
    .more {
      border: 0.01rem solid #aaa;
      border-radius: 0.1rem;
      padding: 0.07rem;
      font-size: 0.2rem;
    }
  }
  .musicList-content {
    .musicList-swipe-item {
      position: relative;
      .item-img {
        width: 100%;
        border-radius: 0.1rem;
        height: auto;
      }
      .item-text {
        font-size: 0.2rem;
        font-weight: 500;
      }
      .item-play-count {
        .icon {
          width: 0.16rem;
          height: 0.16rem;
          fill: #ccc;
          margin-right: 0.05rem;
        }
        position: absolute;
        top: 0.2rem;
        right: 0.1rem;
        font-size: 0.16rem;
        color: #ccc;
      }
    }
  }
}
/deep/ .van-swipe {
  overflow: visible;
  width: 7.5rem;
}
</style>

总结：

这个思路比较简单，缺点是要自己慢慢调样式比较麻烦，如果加上指示器小圆点还要自己调整指示器的样式，自动轮播循环播放的时候也有bug，后面两个图会显示不出来，以后有缘再改吧！