vue轮播图
在公司手机端的vue编写中，需要用到一个轮播图，我一开始的时候使用的时候使用的是想在created中定义一个轮播函数，但是实际上这个轮播函数没有起作用，后面在网上看了一下，看到了网上的轮播图代码，是使用 transition-group来实现的，实践了一遍，现在代码如下：
这个是pc版的，假如我们要使用webAPP开发应用，我们需要使用touch事件，使用的touch事件如下：
touch事件属于html5的内容，下面是一系列的touch事件：
touchstart事件：当手指触摸屏幕的时候触发
touchend事件：当手指从屏幕离开的时候触发
touchmove事件:当手指在屏幕上滑动的时候触发
touches：表示当前跟踪的触摸操作的touch对象的数组。
targetTouches：特定于事件目标的Touch对象的数组。
changeTouches：表示自上次触摸以来发生了什么改变的Touch对象的数组。
每个touch对象的属性如下：
clientX:触摸对象在视口中的x坐标
clientY:触摸对象在视口中的y坐标
pageX：触摸对象在页面中的x坐标
pageY:触摸对象在页面中的y坐标
screenX:触摸对象在屏幕中的x坐标
screenY:触摸对象在屏幕中的y坐标
target:触摸的DOM事件坐标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
.carousel-wrap{
width: 600px;
position: relative;
margin: 0 auto;
}
.carousel {
position: relative;
height: 500px;
width: 600px;
background-color: #fff;
overflow: hidden;
}
.slide-ul {
width: 100%;
height: 100%;
}
li {
position: absolute;
width: 100%;
height: 100%;
}
img {
width: 100%;
height: 100%;
}
.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)
}
.carousel-items{
position: absolute;
bottom: 10px;
margin:0 auto;
width: 100%;
text-align: center;
}
.circle{
display: inline-block;
width: 10px;
height: 10px;
border-radius: 100%;
border: 1px solid black;
margin: 0 10px;
}
.item-active{
background-color: whitesmoke;
}
</style>
</head>
<body>
<div id="carousel" class="carousel-wrap">
<div class="carousel">
<transition-group tag="ul" class="slide-ul" name="list">
<li v-for="(list,index) in slideList" :key="index" v-show="index===currentIndex" @mouseenter="stop" @mouseleave="go">
<a href="list.clickHref">
<img :src="list.img" :alt="list.desc">
</a>
</li>
</transition-group>
</div>
<div class="carousel-items">
<span v-for="(item,index) in slideList.length" class="circle" :class="{'item-active':index===currentIndex}" @click="change(index)"></span>
</div>
</div>
<script src="vue.js"></script>
<script type="application/ecmascript">
new Vue({
el: "#carousel",
data:{
slideList: [
{
clickHref:"1",
img:"images/book5.jpg"
},
{
clickHref:"2",
img:"images/book6.jpg"
},
{
clickHref:"3",
img:"images/book7.jpg"
}
],
currentIndex:0,
timer:''
},
methods:{
autoPlay:function(){
this.currentIndex++;
if (this.currentIndex > this.slideList.length - 1) {
this.currentIndex = 0
}
},
stop: function () {
clearInterval(this.timer);
this.timer=null;
},
go: function(){
this.timer=setInterval(()=>{
this.autoPlay()
},4000)
},
change: function(index){
this.currentIndex=index;
}
},
created(){
this.$nextTick(()=>{
this.timer=setInterval(()=>{
this.autoPlay()
},4000)
}
)
}
})
</script>
</body>
</html>
如上：
基本思路如下：
html代码结构：
//声明一个总的容器，用来容纳轮播图片部分和下面的指示小圆点
<div id="carousel" class="carousel-wrap">
//轮播图部分，这一部分用于图片相对的轮播 <div class="carousel">
//transition-group部分，用来定义动作 <transition-group tag="ul" class="slide-ul" name="list">
//用了一个v-for，相当于遍历，（list,index）list表示内容，index表示索引，v-show表示当currentIndex===idnex的时候显示同时在这上面定义了当数遍进入离开时动作的函数 <li v-for="(list,index) in slideList" :key="index" v-show="index===currentIndex" @mouseenter="stop" @mouseleave="go"> <a href="list.clickHref"> <img :src="list.img" :alt="list.desc"> </a> </li> </transition-group> </div>
//这部分用来容纳圆点 <div class="carousel-items">
//通过v-for，使得轮播的图片部分和小圆点的数量一致，定义了点击事件 <span v-for="(item,index) in slideList.length" class="circle" :class="{'item-active':index===currentIndex}" @click="change(index)"></span> </div> </div>
CSS代码结构：
<style>
*{
padding: 0;
margin: 0;
}
//定义最外层的样式，position:relative用来为后面小圆点部分的位置定位
.carousel-wrap{
width: 600px;
position: relative;
margin: 0 auto;
}
//图片轮播层样式，定义了position为了后面li元素的absolute滑动
.carousel {
position: relative;
height: 500px;
width: 600px;
background-color: #fff;
overflow: hidden;
}
//width height 100%是相对于轮播图部分外层定义
.slide-ul {
width: 100%;
height: 100%;
}
li {
position: absolute;
width: 100%;
height: 100%;
}
img {
width: 100%;
height: 100%;
}
//下面是各个状态的类表示，后面我会重点说明
.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)
}
//对于小圆点部分的定义，这一部分用来定义小圆点部分的位置，定义width:100%，text-align:center;让小圆点居中显示
.carousel-items{
position: absolute;
bottom: 10px;
margin:0 auto;
width: 100%;
text-align: center;
}
.circle{
//定义小圆点的样式
display: inline-block;
width: 10px;
height: 10px;
border-radius: 100%;
border: 1px solid black;
margin: 0 10px;
}
.item-active{
background-color: whitesmoke;
}
</style>
如上：
vue.js代码：
new Vue({
el: "#carousel",
data:{
//初始样式
slideList: [
{
clickHref:"1",
img:"images/book5.jpg"
},
{
clickHref:"2",
img:"images/book6.jpg"
},
{
clickHref:"3",
img:"images/book7.jpg"
}
],
currentIndex:0,
timer:''
},
methods:{
//定义函数：autoplay,stop，go，change四个函数
autoPlay:function(){
this.currentIndex++;
if (this.currentIndex > this.slideList.length - 1) {
this.currentIndex = 0
}
},
stop: function () {
clearInterval(this.timer);
this.timer=null;
},
go: function(){
this.timer=setInterval(()=>{
this.autoPlay()
},4000)
},
change: function(index){
this.currentIndex=index;
}
},
created(){
在生命周期的created阶段进行调用函数
this.$nexttick用于在
this.$nextTick(()=>{
this.timer=setInterval(()=>{
this.autoPlay()
},4000)
}
)
}
})
如上：
在上面的实例中，
一：使用this.$nextTick（）函数用来在数据变化之后等待vue完成更新DOM,在DOM更新之后使用 Vue.nextTick(Callack),Callback回调函数在数据更新之后被调用？
this.$nextTick（）发生在当vue实例中的函数数据发生变化的时候进行函数调用，而且我们也可以看到，上面我们使用了箭头函数
二：es6的箭头函数的用法：
我们在正常的函数中这样来定义函数：
function(X){
return x*x;
}
现在我们使用箭头函数可以这样写：
x=>x*x
使用箭头函数可以让我们更加直观的定义函数：
在箭号左边表示函数的参数，箭号右边表示要返回的表达式
更多的es6箭头函数的知识点后面会进行介绍；
三：
在vue中定义动画类名：
在使用transtion-group中定义的动画中，共有四种定义状态：
v-enter:定义进入过渡时生效，这是一开始过度时的状态
v-enter-active：定义过渡的状态，在整个过渡状态中起作用，这个可以认为在过渡的过程中起作用的
v-leave:定义离开过渡的状态
v-leave-active:定义离开过渡的状态
在上面的轮播图中，各个类名的含义解释如下：
//定义进入时候的类名
//transform:进入后最终的目标
.list-enter-active { transition: all 1s ease; transform: translateX(0) } .list-leave-active {
//离开最后的目的地是位于translateX(-100%)部分 transition: all 1s ease; transform: translateX(-100%) } .list-enter {
//定义进入的位置，在translateX（100%）处进入 transform: translateX(100%) }
//定义离开的位置，在translateX(0)处离开 .list-leave { transform: translateX(0) }
最后，献上这张图片：
可以看到一系列的class的位置：我们可以看到不同class作用的位置
浙公网安备 33010602011771号