vue.js实现简单轮播
来源:互联网 发布:淘宝秒杀助手mac 编辑:程序博客网 时间:2024/06/13 03:59
学习了vue.js也有一段时间了,做了个小demo来熟悉一下,很常见的demo,-------轮播图,没学vue之前的轮播图用JavaScript或者jquery都非常简单,发现用vue来写也挺有意思的。说下简单的思路,图片的轮播用v-if或者v-show来代替原来的Js滑动,过度效果用transition可简单实现,注意,滑动过程中是能看见两张图的,所以要用两个transition。
(1)先写出整体的框架
<template>
<div class="slide-show">
<div class="slide-img">
<transition name="slide-trans" >
<img v-if='ifshow' :src='imgArray[nowindex]'>
</transition>
<transition name="slide-trans-old">
<img v-if="!ifshow" :src="imgArray[nowindex]">
</transition>
<ul class="slide-pages">
<li v-for="(item,index) in imgArray">
<span :class="{on :index===nowindex}" @click="goto(index)"></span>
</li>
</ul>
</div>
</div>
</template>
根据imgArray这个照片的数组渲染小圆点的数量,为span绑定on为小圆点点亮的状态,照片的显示隐藏通过自定义变量ifshow来显示,nowindex则控制轮播对应的照片。
(2)轮播图的数组,如果是本地的图片,而且不放在static文件下的,请用require圈上路径,否则路径会报错。如果是从后台服务器获取的则不需要。
data(){
return{
imgArray: [
require('../../img/item_01.png'),
require('../../img/item_02.png'),
require('../../img/item_03.png'),
require('../../img/item_04.png')
]
}
}
(3)主要就是通过改变自定义变量nowindex来改变轮播图的状态,要注意滑动的过程是能看见两张图的,所以在goto函数中设置了一个短暂的定时器,让一张显示另一张隐藏,分别加上不同的过度效果。
<script type="text/javascript">
export default {
props:{
imgArray:{
type:Array,
default:[]
}
},
data() {
return {
ifshow:true,
nowindex:0,
}
},
created(){
this.timerun()
},
computed:{
nextindex(){
if(this.nowindex === this.imgArray.length -1){
return 0
}else{
return this.nowindex + 1
}
}
},
methods: {
goto(index){
let that = this;
this.ifshow = false;
setTimeout(function(){
that.ifshow = true;
that.nowindex = index;
},100)
},
timerun(){
let that = this;
setInterval(function(){
that.goto(that.nextindex)
},2000)
}
}
}
到这里,这个简单的轮播图就到此结束了。
</script>
- vue.js实现简单轮播
- vue.js+vue-awesome-swiper轮播
- js实现简单轮播效果
- vue.js实现简单todolist
- js 实现一个简单的3D轮播效果
- html js简单实现图片轮播功能
- vue 快捷轮播组件代码实现
- js实现图片轮播
- js实现图片轮播
- js实现图片轮播
- js轮播的实现
- js 实现banner轮播
- js实现图片轮播
- js实现图片轮播
- js 无缝轮播实现
- js实现轮播效果
- js实现图片轮播
- js实现无缝轮播
- Hibernate5用户手册中文版 PDF 下载
- arrayAdapter.notifyDataSetChanged()
- spring源码与架构分析——Spring框架的一些理解
- 字符流(缓冲区问题)
- BIG-IP系统iRules基本概念_v11.6.1
- vue.js实现简单轮播
- 例题8-3:和为0的4个值(中途相遇法)
- 汉诺塔问题(递归)
- 用python爬虫爬取moodle全部课件并下载到本地
- java 一维数组求最大值最小值
- (DOM艺术)图片仓库改进一:完全分离
- HDU 3874 Necklace
- set action为Call时startActivity(intent);出现红线错误的解决方法
- maven核心,pom.xml详解