您好,登录后才能下订单哦!
小编给大家分享一下vue.js可以用来做轮播图,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
vue.js能做轮播图,其实现方法:首先写出整体的框架;然后根据imgArray照片的数组渲染小圆点的数量;接着将span绑定on为小圆点点亮的状态;最后通过自定义变量ifshow来显示图片的显示隐藏,并设置nowindex来控制轮播即可。
最近新学习了vuejs,尝试着用vuejs写了一个简单的图片轮播,便做个简单的记录
(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可以用来做轮播图”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。