Vue中如何实现轮播图效果-创新互联
这篇文章将为大家详细讲解有关Vue中如何实现轮播图效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
成都创新互联专注于企业
营销型网站、网站重做改版、闽清网站定制设计、自适应品牌网站建设、
H5高端网站建设、
商城网站制作、集团公司官网建设、成都外贸网站建设公司、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为闽清等各大城市提供网站开发制作服务。
Vue 过渡
Vue 的过渡系统是内置的，在元素从 DOM 中插入或移除时自动应用过渡效果。
过渡的实现要在目标元素上使用 transition 属性，具体实现参考Vue2 过渡
下面例子中我们用到列表过渡，可以先学习一下官方的例子
要同时渲染整个列表，比如使用 v-for，我们需要用到 组件
Vue 轮播图
我们先看这样一个列表
这个列表要从实例(见文章末尾)中获取了三张图片，要使其中的图片产生轮播，我们需要用 组件替换其中的 ul 标签，从而实现过渡组件的功能，完整的组件 DOM 内容如下，下面分段解释一下
// 轮播图列表
// 轮播图位置指示
对应的数据结构如下：
data: {
slideList: [
{
"clickUrl": "#",
"desc": "nhwc",
"image": "http://dummyimage.com/1745x492/f1d65b"
},
{
"clickUrl": "#",
"desc": "hxrj",
"image": "http://dummyimage.com/1745x492/40b7ea"
},
{
"clickUrl": "#",
"desc": "rsdh",
"image": "http://dummyimage.com/1745x492/e3c933"
}
],
currentIndex: 0,
timer: ''
},在使用 v-for 时，应给对应的元素绑定一个 key 属性，相当于 index 标识，在 组件中，key 是必须的，这样一个轮播图的 DOM 结构就完成了
接下来我们看看轮播函数的实现，再来看组件中的 li 元素
上面通过 v-for 渲染了 li 列表，并在其中插入了包含可点击跳转的图片，接下来看看如何实现轮播，轮播图的样式直接在后面给出大家 sass 代码，父元素 ul 设置position: relative;overflow: hidden后，li 大小设为和父元素相同，absolute 定位固定在父元素中，要让 li 按照顺序显示，需要用到 v-show 或 v-if 处理，通过 index 值来改变当前显示的 li ，本例 v-show 绑定条件index===currentIndex，用定时器改变 currentIndex 实现轮播
实例中的方法：
//在下个tick执行等待图片加载完成后再
this.$nextTick(() => {
this.timer = setInterval(() => {
this.autoPlay()
},4000)
}),
go() {
this.timer = setInterval(() => {
this.autoPlay()
},4000)
},
stop() {
clearInterval(this.timer)
this.timer = null
},
change(index) {
this.currentIndex = index
},
autoPlay() {
this.currentIndex++
if (this.currentIndex > this.slideList.length - 1) {
this.currentIndex = 0
}
}DOM 中为每个轮播 li 元素绑定事件@mouseenter="stop" @mouseleave="go"事件,使轮播鼠标移入时停止，移出时再次开始。
轮播图现在位置指示，绑定类名 active 改变颜色，绑定 change() 方法，鼠标移到指示点时跳转轮播图
sass 样式代码
.carousel-wrap {
position: relative;
height: 453px;
width: 100%;
overflow: hidden;
// 删除
background-color: #fff;
}
.slide-ul {
width: 100%;
height: 100%;
li {
position: absolute;
width: 100%;
height: 100%;
img {
width: 100%;
height: 100%;
}
}
}
.carousel-items {
position: absolute;
z-index: 10;
top: 380px;
width: 100%;
margin: 0 auto;
text-align: center;
font-size: 0;
span {
display: inline-block;
height: 6px;
width: 30px;
margin: 0 3px;
background-color: #b2b2b2;
cursor: pointer;
}
.active {
background-color: $btn-color;
}
}滑动动画设置，知识点详见 Vue 教程中的 过渡 css 类名
.list-enter-active {
transition: all 1s ease;
transform: translateX(0)
}
.list-leave-active {
transition: all 1s ease;
transform: translateX(-100%)
}
.list-enter {
transform: translateX(100%)
}
.list-leave {
transform: translateX(0)
}完整 Vue 实例如下
new Vue({
el: '#carousel',
data: {
slideList: [
{
"clickUrl": "#",
"desc": "nhwc",
"image": "http://dummyimage.com/1745x492/f1d65b"
},
{
"clickUrl": "#",
"desc": "hxrj",
"image": "http://dummyimage.com/1745x492/40b7ea"
},
{
"clickUrl": "#",
"desc": "rsdh",
"image": "http://dummyimage.com/1745x492/e3c933"
}
],
currentIndex: 0,
timer: ''
},
methods: {
this.$nextTick(() => {
this.timer = setInterval(() => {
this.autoPlay()
},4000)
})
go() {
this.timer = setInterval(() => {
this.autoPlay()
},4000)
},
stop() {
clearInterval(this.timer)
this.timer = null
},
change(index) {
this.currentIndex = index
},
autoPlay() {
this.currentIndex++
if (this.currentIndex > this.slideList.length - 1) {
this.currentIndex = 0
}
}
}
})关于“Vue中如何实现轮播图效果”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
分享名称：Vue中如何实现轮播图效果-创新互联
分享地址：
http://chengdu.cdxwcx.cn/article/cccisj.html
