9vant-ui实现轮播

官网地址https://youzan.github.io/vant/?source=vuejsorg#/zh-CN/swipe

1.安装依赖

yarn add vant

2.main.js中引入依赖

import Vant from 'vant'
import 'vant/lib/index.css'    //vant
import { Swipe, SwipeItem } from 'vant';
import { Lazyload } from 'vant';
Vue.use(Swipe).use(SwipeItem);
Vue.use(Lazyload);

3.使用.vue文件中

<template>
    <div>
        <van-swipe :autoplay="3000">
            <van-swipe-item v-for="(image, index) in images" :key="index" @click="handleClick(index)">
            <img v-lazy="image" />
       </van-swipe-item>
     </van-swipe> 
    </div>
</template>
<script>
import {ImagePreview} from 'vant'
    export default {
        name:"Music",
        data(){
            return{
                images:[
                    require('@/assets/logo.png'),     //图片显示不了，要使用镜像
                    require('@/assets/logo.png'),
                ]
            }
        },
        methods:{
            handleClick(index){     //点击事件，点击查看大图
                const instance=ImagePreview({
                  images:this.images,
                  asyncClose:true,
                  startPosition:index,
                  onClose(){
                      instance.close()
                  }
              });
            }
        }
    }
</script>
<style  scoped>
</style>