vue實現無縫輪播效果(跑馬燈)
阿新 • • 發佈:2021-05-17
本文例項為大家分享了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="getImg('01')" alt="vue實現無縫輪播效果(跑馬燈)"> </div> </Sweiper-item> <Sweiper-item name="item2"> <div class="item"> <img :src="getImg('02')" alt="vue實現無縫輪播效果(跑馬燈)"> </div> </Sweiper-item> <Sweiper-item name="item3"> <div class="item"> <img :src="getImg('03')" alt="vue實現無縫輪播效果(跑馬燈)"> </div> </Sweiper-item&g程式設計客棧t; </Sweiper> </div> </template> 這裡的圖片沒有通過陣列用v-for迴圈,方便大家看其結構形式 <script> import Sweiper from "../components/Sweiper.vue"; import SweiperItem from "../chttp://www.cppcns.comomponents/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.1r程式設計客棧em;*/ } </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(-1程式設計客棧00%); } .v-enter{ transform: translate(100%); } .v-enter-active{ position: absolute; top:0; left: 0; } </style>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。