vue利用vant组件实现轮播图效果
作者：Saga Two
vant组件适用于移动端项目,目前项目开源,是市面上做的比较好的开源项目,功能比较强大,本文小编就来为大家介绍一下如何利用vant实现轮播图效果吧
1.引言
在互联网日渐内卷的情况下，越来越注重用户体验，轮播图的应用场景越来越 广泛，如应用于以下场景
- 商品详情页 。在商品详情页中展示足够的商品信息，可以将轮播图比作一个团队，每个团队成员都有自己的工作，例如首图负责吸引流量，其余的负责商品的卖点、促销信息、购物保障等等。
- 商品卖点展示 。在轮播图中靠前位置展示买家最看重的商品卖点，可以减少买家的购买决策时长。例如，如果商品在做促销活动或者小赠品时，就可以把活动或者礼品图放在靠前的轮播图上。
- 首页重点场景突出。如重点产品、常用功能入口，热门活动等场景。
同时，市场上的轮播图组件功能也越来越成熟，以下我们就介绍目前常见的实现轮播图的方式。实现效果如下：
vant示例：
自实现：
2.vue实现轮播图
2.1 Vant组件引入
vant组件适用于移动端项目，目前项目开源，是市面上做的比较好的开源项目，功能比较强大，我们先介绍vant实现轮播图效果。对于pc端实现轮播图，市场上也有成熟的组件，如Swipe。
2.1.1 vant组件引入
Vant组件安装引入以及配置在前面我们已经做过介绍，请产找以往链接：
- vue2：vue2引入vant组件
- vue3：vue3引入vant组件
2.2.2 使用van-swipe组件
van-swipe组件和van-swipe-item组件配合使用，原始代码如下：
<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" @change="onChange">
<van-swipe-item>vant-swipe</van-swipe-item>
<van-swipe-item class="dif">2</van-swipe-item>
<van-swipe-item>3</van-swipe-item>
<van-swipe-item>4</van-swipe-item>
</van-swipe>可实现如下动画效果：
若是想进行图片轮播，vant组件还提供了懒加载选项，以解决图片加载过慢卡顿问题，代码如下：
<van-swipe :autoplay="3000" lazy-render>
<van-swipe-item v-for="image in images" :key="image">
<img :src="image" />
</van-swipe-item>
</van-swipe>其次，除了以上功能以外，还可以进行自定义滑块大小和改变轮播方向等操作，这里不做一一介绍，详情请见官网：
2.2 vue代码实现
“鱼”和”渔“相差还是比较大的，除了借助市场组件以外，还可以自己按照需求开发轮播图，以下我们详细介绍一下自己实现轮播图的思路与实现步骤，最后附上我们实现的代码以供参考。
2.2.1 功能需求
- 实现图片轮播；
- 轮播图切换流畅；
- 可自动轮播和手动触发。
2.2.2 实现思路
- 将需要轮播的图片进行排列；
- 添加手动切换按钮。
- 图片切换之间添加动画效果；
- 添加切换逻辑，将排列好的图片进行切换；
2.2.3 代码实现
实现思路代码以及相关注释如下：
<template>
<div class="carousel">
<div @click="prevSlide" class="carousel-prev-icon-left"></div>
<div class="carousel-slides">
<img
v-for="(image, index) in images"
:key="index"
:src="image"
:style="{left: index * 100 + '%', 'transform': dynamicstyle}"
alt="暂无图片"
/>
</div>
<div @click="nextSlide" class="carousel-prev-icon-right"></div>
</div>
</template>
<script>
export default {
data() {
return {
images: [
'/src/assets/img/sakuraTree01.jpeg',
'/src/assets/img/starrySky.jpg',
'/src/assets/img/starrySky02.jpg'
// ... 更多图片
],
dynamicstyle: "", //动态样式
currentSlide: 0, //播放序号
interval: Object,
}
},
mounted() {
// 自动播放动画
this.startSlideshow()
},
methods: {
nextSlide() {
// 每次指针加一
this.currentSlide = (this.currentSlide + 1) % this.images.length
this.setStyle();
},
prevSlide() {
// 每次减一，为负数时循环
this.currentSlide = (this.currentSlide - 1 + this.images.length) % this.images.length;
this.setStyle();
},
// 图片动画
setStyle() {
this.dynamicstyle = `translatex(-${this.currentSlide*100}%)`
},
// 定时器
startSlideshow() {
this.interval = setInterval(() => {
this.currentSlide = (this.currentSlide + 1) % this.images.length;
this.setStyle();
}, 3000)
},
stopSlideshow() {
clearInterval(this.interval)
}
}
}
</script>
<style scoped>
.carousel {
position: relative;
}
.carousel-slides {
position: relative;
width: 320px;
height: 173px;
overflow: hidden;
}
.carousel-slides img {
display: inline-block;
position: absolute;
width: inherit;
margin: 0;
padding: 0;
top: 0;
left: 0;
height: 100%;
transition: 0.5s transform ease-in-out;
}
.carousel-controls {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: center;
}
.carousel-prev-icon-left {
position: absolute;
left: 10px;
top: 55px;
height: 50px;
width: 40px;
border: none;
background-image: url(../../../assets/img/arrow-l.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
z-index: 999;
}
.carousel-prev-icon-right {
position: absolute;
right: 10px;
top: 55px;
height: 50px;
width: 40px;
border: none;
background-image: url('../../../assets/img/arrow-r.png/');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
z-index: 999;
}
</style>以上代码样式部分还可以进行精简，仅供学习参考，商业项目需要进行调试修改，思路可供参考。
需要注意以下几点：
- 图片需要使用绝对定位；
- 动态样式的使用比较灵活；
- 使用动画平移要注意平移单位；
2.2.4 实现效果
实现效果动图如下：
3.总结
实现轮播图的方式方法比较多，但用户体验比较好的不多，查了市面上实现较好的就是使用动画进行位置切换，有限推荐使用市面上比较成熟的组件，如果商业化的话，建议还是自己写，避免版权纠纷。
以上就是vue利用vant组件实现轮播图效果的详细内容，更多关于vue vant轮播图的资料请关注脚本之家其它相关文章！