vue实现轮播图详解
目录
- vue实现轮播图详解
-
- 1 引言
- 2 vue实现轮播图
-
- 2.1 Vant组件引入
-
- 2.1.1 vant组件引入
- 2.2.2 使用van-swipe组件
- 2.2 vue代码实现
-
- 2.2.1 功能需求
- 2.2.2 实现思路
- 2.2.3 代码实现
- 2.2.4 实现效果
- 3 总结
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-swipevan-swipe-item>
van-swipe-item class="dif">2van-swipe-item>
van-swipe-item>3van-swipe-item>
van-swipe-item>4van-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>
其次,除了以上功能以外,还可以进行自定义滑块大小和改变轮播方向等操作,这里不做一一介绍,详情请见官网:
vue3中vant轮播图使用。
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实现轮播图的方法,还有纯html+css+js实现的,与vue相比,需要进行频繁的dom操作,代码篇幅较长。若想要代码请在评论区留言。
引用:vant官网
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net