因为之前一直在忙公司的项目,vue这块就生疏了不少,正好借这个小demo复习下vue的知识。
在成都网站建设、成都网站设计过程中,需要针对客户的行业特点、产品特性、目标受众和市场情况进行定位分析,以确定网站的风格、色彩、版式、交互等方面的设计方向。创新互联公司还需要根据客户的需求进行功能模块的开发和设计,包括内容管理、前台展示、用户权限管理、数据统计和安全保护等功能。
先来个效果图:
如图所示,实现的就是一个间隔2.5s自动向左切换下一张的轮播图,同时鼠标移入停止轮播,移出回复轮播;
而下方按钮会根据当前图片自动变红且可以手动控制当前图片。
思路:
整个demo分为轮播图片和控制span两个部分。
按照前端工程化的需求来说,这两个部分应该解耦成两个component最后再导入页面比较合理,但由于demo较为简单,
作为练手就不搞那么复杂了,对项目有追求【强迫症】的童鞋可以往组件化的目标靠,具体方法参考我之前的博文。
第一步,先写出整体框架:
<template> <div class="slide"> <div class="slideshow"> <ul> <li v-for="(img, index) in imgArray" :key="index"> <a href="#"> <img :src='img'> </a> </li> </ul> </div> <div class="bar"> <span v-for="(item, index) in imgArray" :key="index"></span> </div> </div> </template>
我们使用v-for列表渲染两个部分,值得注意的是列表渲染最好要提供一个key值,至于为什么官方文档说得很复杂,
就我所知的是如果不加key值在使用transition-group也就是过渡效果的时候会出现bug,官方给出的建议也是尽可能
在列表渲染的时候加上key值,百利无一害,养成习惯就好。
第二步:
在上一步我们渲染的是一个img数组,具体:
data () { return { imgArray: [ '../static/timg1.jpg', '../static/timg2.jpg', '../static/timg3.jpg', '../static/timg4.jpg' ] } }
然后实现轮播的原理就是创建一个变量与当前遍历的index值比对,若相同则显示,否则隐藏;
同时下方按钮index若也与变量相同则当前按钮变为活跃状态即背景变红。
<template> <div class="slide"> <div class="slideshow"> <ul> <li v-for="(img, index) in imgArray" v-show="index===mark" :key="index"> <a href="#"> <img :src='img'> </a> </li> </ul> </div> <div class="bar"> <span v-for="(item, index) in imgArray" :class="{ 'active':index===mark }" :key="index"></span> </div> </div> </template>
第三步:
创建定时器,每隔2.5s给变量mark+1,挂载到钩子函数created:
export default { data () { return { mark: 0, //比对图片索引的变量 imgArray: [ '../static/timg1.jpg', '../static/timg2.jpg', '../static/timg3.jpg', '../static/timg4.jpg' ] } }, methods: { autoPlay () { this.mark++; if (this.mark === 4) { //当遍历到最后一张图片置零 this.mark = 0 } }, play () { setInterval(this.autoPlay, 2500) }, change (i) { this.mark = i } }, created () { this.play() } } </script>
第四步:
加上css文件,出现基本的效果。
<style> * { margin: 0; padding: 0; list-style: none; } .slide { width: 1024px; height: 320px; margin: 0 auto; margin-top: 50px; overflow: hidden; position: relative; } .slideshow { width: 1024px; height: 320px; } li { position: absolute; } img { width: 1024px; height: 320px; } .bar { position: absolute; width: 100%; bottom: 10px; margin: 0 auto; z-index: 10; text-align: center; } .bar span { width: 20px; height: 5px; border: 1px solid; background: white; display: inline-block; margin-right: 10px; } .active { background: red !important; } </style>
第五步:
现在我们得到的效果还是每隔一段时间图片突然变成另外一张,用户体验很差,达不到轮播的效果。
所以我们得加上过渡效果。
html:
<transition-group tag="ul" name="image"> <li v-for="(img, index) in imgArray" v-show="index===mark" :key="index"> <a href="#"> <img :src='img'> </a> </li> </transition-group>
css:
.image-enter-active { transform: translateX(0); transition: all 1.5s ease; } .image-leave-active { transform: translateX(-100%); transition: all 1.5s ease; } .image-enter { transform: translateX(100%); } .image-leave { transform: translateX(0); }
这里因为我们是给一个渲染列表加上过渡效果所以要使用transition-group而不是单元素的transition,否则会报错。
另外就是记得给transition-group加上tag="ul"属性,不然就会被默认渲染成span了。
css部分需要关联name属性值作为前缀。
第六步:
给下方按钮增加切换图片的点击事件。
最后我们再加上移入/移出实现关闭/打开定时器效果,即用户鼠标停留当前图片停止滚动,移出则继续。
<template> <div class="slide" v-on:mouseover="stop()" v-on:mouseout="move()"> <div class="slideshow"> <transition-group tag="ul" name="image"> <li v-for="(img, index) in imgArray" v-show="index===mark" :key="index"> <a href="#"> <img :src='img'> </a> </li> </transition-group> </div> <div class="bullet"> <span v-for="(item, index) in imgArray" :class="{ 'active':index===mark }" @click="change(index)" :key="index"></span> </div> </div> </template> <script> export default { data () { return { timer: null, //定时器 mark: 0, //比对图片索引的变量 imgArray: [ '../static/timg1.jpg', '../static/timg2.jpg', '../static/timg3.jpg', '../static/timg4.jpg' ] } }, methods: { autoPlay () { this.mark++; if (this.mark === 4) { this.mark = 0 } }, play () { this.timer = setInterval(this.autoPlay, 2500) }, change (i) { this.mark = i }, stop () { clearInterval(this.timer) }, move () { this.timer = setInterval(this.autoPlay, 2500) } }, created () { this.play() } } </script>
这个地方卡了我很长时间,因为根据原生js定时器的思路在定义定时器的时候就应该设置变量,然后把这个变量传到clearInterval函数里。
问题在于vue函数里设置变量很不可取,存在定义域的问题,开启定时器跟关闭定时器是两个函数,不能共用一个变量。
后来灵机一动,想到不如把变量写在data里面?
一试,成功!
至此,轮播图的功能基本实现。
当然,项目做的比较简陋也存在一些bug,如当一个切换动画未完成前点击另一个按钮会出现神奇的交错现象,由于时间关系还未解决,
希望各位看官能提出宝贵的建议!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。
网页名称:基于vue2.0实现简单轮播图
文章来源:https://www.cdcxhl.com/article44/psjghe.html
成都网站建设公司_创新互联,为您提供自适应网站、微信公众号、用户体验、服务器托管、软件开发、小程序开发
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联