结合vant组件快速制作一个二次元轮播图

结合vant组件快速制作一个二次元轮播图

本文讲解如何利用vant组件快速制作一个含有二次元元素的轮播图。

代码编写

如何创建vant项目看这篇文章：

效果展示

代码如下

<template>  
  <div class="container">
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img :src="image" class="image" />
        </van-swipe-item>
      </van-swipe>
      
  </div>
</template>


<script>

export default {
      
      
data () {
      
      
  return {
      
      
    images: [
      'https://pic4.zhimg.com/v2-7d92536136452ddf676cb02780695a27_r.jpg',
      'https://pic2.zhimg.com/v2-43fa0ff6938fc02727da20812b7a571d_b.jpg',
      'https://p1.ssl.qhimg.com/t01525a62446d20148b.jpg',
      'https://pic2.zhimg.com/v2-693cfbb17e0b0036ad0a33be10d177c5_r.jpg',
      'https://pic4.zhimg.com/v2-3c8e39a7f444a3d157d8faec8c8b10b7_r.jpg'
    ]
  }
}
}
</script>

<style>
.container {
      
      
  display: flex;
  flex-direction: column;
  height: 100%;
}

.image {
      
      
  width: 100%;
  height: 200px; /* 这里设置图片高度为 200px，可以根据实际需要进行调整 */
  object-fit: cover; /* 使用 cover 属性截取图片，不超出容器范围 */
}
</style>