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

分手后的思念是犯贱 2024-03-16 16:25 35阅读 0赞

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

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

### 代码编写 ###

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

效果展示  
![在这里插入图片描述][1b6a882519f84914a38b92f4dc222d4d.png]

![在这里插入图片描述][962fb153dd274f69b6d464303bf8c83c.png]

代码如下

<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>

[1b6a882519f84914a38b92f4dc222d4d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/f6c1568af62740b6b4b1461d3f5be37c.png
[962fb153dd274f69b6d464303bf8c83c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/92687a48d1e64cf59f9d79fef1065617.png