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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。