|
vue3使用轮播图(基础用法和懒加载)
注意: 看前请先浏览vant轮播图
基础用法(直接上代码):
//使用基础用法
//这里直接用img标签也可以
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
},
}
.my-swipe .van-swipe-item {
color: #fff;
font-size: 20px;
line-height: 0px;
text-align: center;
background-color: #39a9ed;
}
注意: 记得把line-height设置为0, 不然有可能会因为图片大小而导致指示器过于向下, 例如(直接踩过的坑):
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nSwntWCy-1630768756312)(C:\Users\決别\AppData\Roaming\Typora\typora-user-images\image-20210904231323668.png)]
懒加载(直接上代码):
//使用懒加载
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
},
}
.my-swipe .van-swipe-item {
color: #fff;
font-size: 20px;
line-height: 0px;
text-align: center;
background-color: #39a9ed;
}
-size: 20px; line-height: 0px; text-align: center; background-color: #39a9ed; }
|