本文實(shí)例為大家分享了vue實(shí)現(xiàn)無縫輪播效果的具體代碼，供大家參考，具體內(nèi)容如下

1.首先創(chuàng)建兩個vue組件Sweiper.vue和SweiperItem.vue;

2.將兩個組件引入頁面，Sweiper.vue中用v-model傳參（v-model 其實(shí)是語法糖，默認(rèn)屬性value和默認(rèn)事件input）；代碼中我是通過v-model的selcted將值傳給Sweiper（子組件），自動輪播時子組件再通過觸發(fā)input事件將即將顯示的值傳回給父組件

3.核心是要讓selected的值傳到SweiperItem中，與SweiperItem中的name值相等判該顯示哪張圖片；

<template> <div> <Sweiper v-model='selected'> <!--v-model是個語法糖，相當(dāng)于value和input事件--> <Sweiper-item name='item1'><div class='item'> <img :src='http://m.cgvv.com.cn/bcjs/getImg(’01’)' alt=''></div> </Sweiper-item> <Sweiper-item name='item2'><div class='item'> <img :src='http://m.cgvv.com.cn/bcjs/getImg(’02’)' alt=''></div> </Sweiper-item> <Sweiper-item name='item3'><div class='item'> <img :src='http://m.cgvv.com.cn/bcjs/getImg(’03’)' alt=''></div> </Sweiper-item> </Sweiper> </div></template>這里的圖片沒有通過數(shù)組用v-for循環(huán)，方便大家看其結(jié)構(gòu)形式<script> import Sweiper from '../components/Sweiper.vue'; import SweiperItem from '../components/SweiperItem.vue'; export default { name: 'mySweiper', components: { Sweiper, SweiperItem }, data() { return {selected: 'item1',//默認(rèn)第一張 } }, methods:{ getImg(url){return 'img/'+url+'.jpg' }, }, mounted(){ /*setInterval(()=>{ this.selected='item2' },3000) 此時因?yàn)閙ounted只執(zhí)行一次，所以還是不變，需要在Sweiper寫一個watch監(jiān)聽 }*/這一步注釋是因?yàn)閾Q到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的方法遍歷出當(dāng)前輪播的下表 this.names=this.$children.map(child=>{ return child.name }); this. showImg(); this. paly() }, methods:{ showImg(){this.current=this.value||this.$children[0].name;//當(dāng)前實(shí)例的直接子組件this.$children.map(vm=>{ vm.selected=this.current}) }, paly(){//每次輪播把圖片做調(diào)整this.timer=setInterval(()=>{ //indexOf返回某個指定字符串首次出現(xiàn)的位置 const index=this.names.indexOf(this.current); let newIndex=index+1; //嚴(yán)謹(jǐn)一點(diǎn) if (newIndex===this.names.length){ newIndex=0; } this.$emit('input',this.names[newIndex])},3000) } }, watch:{ //監(jiān)聽value值，發(fā)生變化就改變selected value(){this. showImg() } }, beforeDestroy() { //實(shí)列銷毀前 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>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。