vue实现无缝轮播效果（跑马灯）

本文实例为大家分享了vue实现无缝轮播效果的具体代码，供大家参考，具体内容如下

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.haobala.com/bcjs/getImg(’01’)' alt=''></div> </Sweiper-item> <Sweiper-item name='item2'><div class='item'> <img :src='https://www.haobala.com/bcjs/getImg(’02’)' alt=''></div> </Sweiper-item> <Sweiper-item name='item3'><div class='item'> <img :src='https://www.haobala.com/bcjs/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 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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持好吧啦网。