vue实现无缝轮播图
轮播图的思路
一组图片进行不停地循环,如果循环到最后一张图片,就从第一张开始,不停循环,我们可以设置图片切换的时间.
1.首先我们先把我们需要用到的数据以数组的方式定义在data中,再定义一个当前显示在页面的图片的值,默认为0.
data() { return { v:0, imglist:[ {"id":0,img:"/pics/picture1.jpg"}, {"id":1,img:"/pics/picture3.jpg"}, {"id":2,img:"/pics/picture4.jpg"}, ] } },
2.我们将定义的数据渲染到页面中,v-show使用三目判断定义的值和下标是否相等,如果相等值就为true(显示),否则值为false(隐藏)
<div class="imgbox"> <img :src="https://www.atool.online/article/item.img" alt="" v-for="(item, index) in imglist" :key="index" v-show="v==index?true:false"> </div>
3.下一步要让轮播图运行起来,created()这是生命周期中的一个属性,他的作用是在项目启动的时候实现函数自执行. 先设置一个定时器,设置两秒,就是图片每两秒切换一次,然后做判断,如果定义的值大于图片数字的长度减1,那么就让值=0,从第一张开始,否则,就让图片一直++,不断递增,实现轮播图的效果.
created(){ setInterval(() => { if(this.v>=2){ this.v=0 } else{ this.v++ } }, 2000); }
无缝轮播(跑马灯效果)
1.首先创建两个vue组件Sweiper.vue和SweiperItem.vue;
2.将两个组件引入页面,Sweiper.vue中用v-model传参(v-model 其实是语法糖,默认属性value和默认事件input);代码中我是通过v-model的selcted将值传给Sweiper(子组件),自动轮播时子组件再通过触发input事件将即将显示的值传回给父组件
3.核心是要让selected的值传到SweiperItem中,与SweiperItem中的name值相等判该显示哪张图片;
<template> <div> <Sweiper v-model="selected"> <!--v-model是个语法糖,相当于value和input事件--> <Sweiper-item name="item1"> <div class="item"> <img :src="https://www.atool.online/article/getImg('01')" alt=""> </div> </Sweiper-item> <Sweiper-item name="item2"> <div class="item"> <img :src="https://www.atool.online/article/getImg('02')" alt=""> </div> </Sweiper-item> <Sweiper-item name="item3"> <div class="item"> <img :src="https://www.atool.online/article/getImg('03')" alt=""> </div> </Sweiper-item> </Sweiper> </div> </template>
这里的图片没有通过数组用v-for循环,方便大家看其结构形式
<script> import Sweiper from "../components/Sweiper.vue"; import SweiperItem from "../components/SweiperItem.vue"; export default { name: "mySweiper", components: { Sweiper, SweiperItem }, data() { return { selected: "item1",//默认第一张 } }, methods:{ getImg(url){ return "img/"+url+".jpg" }, }, mounted(){ /*setInterval(()=>{ this.selected="item2" },3000) 此时因为mounted只执行一次,所以还是不变,需要在Sweiper写一个watch监听 }*/这一步注释是因为换到Sweiper组件中写了 } </script>
<style > .item{ /*border: 1px solid black;*/ } .item>img{ width: 100%; /*height: 0.1rem;*/ } </style>
Sweiper.vue
<template> <div class="Sweiper"> <slot></slot> </div> </template>
<script> export default { name: "Sweiper", data() { return{ current:'' } }, props:{ value:{ type:String, default:"" }, }, mounted(){ //自动轮播时查找name值用indexOf的方法遍历出当前轮播的下表 this.names=this.$children.map(child=>{ return child.name }); this. showImg(); this. paly() }, methods:{ showImg(){ this.current=this.value||this.$children[0].name; //当前实例的直接子组件 this.$children.map(vm=>{ vm.selected=this.current }) }, paly(){ //每次轮播把图片做调整 this.timer=setInterval(()=>{ //indexOf返回某个指定字符串首次出现的位置 const index=this.names.indexOf(this.current); let newIndex=index+1; //严谨一点 if (newIndex===this.names.length){ newIndex=0; } this.$emit("input",this.names[newIndex]) },3000) } }, watch:{ //监听value值,发生变化就改变selected value(){ this. showImg() } }, beforeDestroy() { //实列销毁前 clearInterval(this.timer) } }; </script>
<style> .Sweiper{ /*border: 1px solid black;*/ width: 100%; height: 4rem; overflow: hidden; margin: 0 auto; position: relative; } </style>
SweiperItem.vue
<template> <transition> <div class="Sweiper-item" v-show="isShow"> <slot></slot> </div> </transition> </template>
<script> export default { name:"SweiperItem", data(){ return{ selected:"" } }, props:{ name:{ type:String, required:true }, }, mounted(){ }, computed:{ isShow(){ return this.selected===this.name; } } }; </script>
<style> .v-enter-active,.v-leave-active{ transition: all 1s linear; } .v-leave-to{ transform:translate(-100%); } .v-enter{ transform: translate(100%); } .v-enter-active{ position: absolute; top:0; left: 0; } </style>
以上为个人经验,希望能给大家一个参考,也希望大家多多支持阿兔在线工具。