[JavaScript知识库]vue3使用轮播图(基础用法和懒加载)

vue3使用轮播图(基础用法和懒加载)

注意: 看前请先浏览vant轮播图

基础用法(直接上代码):

<template>
    <div class="Order">
    	//使用基础用法
        <van-swipe class="my-swipe" :autoplay="1000" indicator-color="white">
            <van-swipe-item v-for="(item, index) in images" :key="index">
            	//这里直接用img标签也可以
                <van-image :src="item.pic"/>
            </van-swipe-item>
        </van-swipe>
    </div>
</template>

<script>
import {reactive} from 'vue'
//注册组件
import { Button, Swipe, SwipeItem, Image } from 'vant';
export default {
    name: 'Order',
    setup() {
        const images = [
            {pic:require("@/assets/img/1.jpg")},
            {pic:require("@/assets/img/2.jpg")},
            {pic:require("@/assets/img/3.jpg")},
            {pic:require("@/assets/img/4.jpg")},
            {pic:require("@/assets/img/5.jpg")},
            {pic:require("@/assets/img/6.jpg")},
         
        ];
        return { 
        	images
        };
    },
    components: {
        [Swipe.name]: Swipe,
        [SwipeItem.name]: SwipeItem,
        [Image.name]: Image
    },
}
</script>

<style scoped>
 .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 0px;
    text-align: center;
    background-color: #39a9ed;
  }
</style>

注意: 记得把line-height设置为0, 不然有可能会因为图片大小而导致指示器过于向下, 例如(直接踩过的坑):

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nSwntWCy-1630768756312)(C:\Users\決别\AppData\Roaming\Typora\typora-user-images\image-20210904231323668.png)]

懒加载(直接上代码):

<template>
    <div class="Order">
    	//使用懒加载
        <van-swipe :autoplay="1000" lazy-render>
        <van-swipe-item v-for="image in images" :key="image">
            <img :src="image.pic"/>
        </van-swipe-item>
        </van-swipe>
    </div>
</template>

<script>
import {reactive} from 'vue'
//注册组件
import { Button, Swipe, SwipeItem, Image } from 'vant';
export default {
    name: 'Order',
    setup() {
        const images = [
            {pic:require("@/assets/img/1.jpg")},
            {pic:require("@/assets/img/2.jpg")},
            {pic:require("@/assets/img/3.jpg")},
            {pic:require("@/assets/img/4.jpg")},
            {pic:require("@/assets/img/5.jpg")},
            {pic:require("@/assets/img/6.jpg")},
         
        ];
        return { 
        	images
        };
    },
    components: {
        [Swipe.name]: Swipe,
        [SwipeItem.name]: SwipeItem,
        [Image.name]: Image
    },
}
</script>

<style scoped>
 .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 0px;
    text-align: center;
    background-color: #39a9ed;
  }
</style>

-size: 20px;
line-height: 0px;
text-align: center;
background-color: #39a9ed;
}