This article has shared with you the specific code for Vue to achieve seamless carousel effect for your reference. The specific content is as follows
1. First create two vue components and;
2. Introduce two components into the page, and use v-model to pass parameters (v-model is actually syntactic sugar, default attribute value and default event input）；
In the code, I pass the value to Sweiper through the selcted of v-model. When the subcomponent is automatically rotated, the subcomponent then triggers it.input eventPass the upcoming value back to the parent component
3. The core is to pass the selected value to the SweiperItem, and determine which picture to display with the name value in the SweiperItem;
<template>
<div>
<Sweiper v-model="selected">
<!--v-modelIt's a syntactic sugar，Equivalent tovalueandinputevent-->
<Sweiper-item name="item1">
<div class="item">
<img :src="getImg('01')" alt="">
</div>
</Sweiper-item>
<Sweiper-item name="item2">
<div class="item">
<img :src="getImg('02')" alt="">
</div>
</Sweiper-item>
<Sweiper-item name="item3">
<div class="item">
<img :src="getImg('03')" alt="">
</div>
</Sweiper-item>
</Sweiper>
</div>
</template>
The picture here does not use v-for loop through the array, so that everyone can see its structure.
<script>
import Sweiper from "../components/";
import SweiperItem from "../components/";
export default {
name: "mySweiper",
components: {
Sweiper,
SweiperItem
},
data() {
return {
selected: "item1",//Default first picture }
},
methods:{
getImg(url){
return "img/"+url+".jpg"
},
},
mounted(){
/*setInterval(()=>{
="item2"
},3000)
At this time, because mounted is only executed once, it remains unchanged. You need to write a watch listener in Sweiper
}*/This comment is becauseSweiperWrite in the component
}
</script>
<style >
.item{
/*border: 1px solid black;*/
}
.item>img{
width: 100%;
/*height: 0.1rem;*/
}
</style>
<template>
<div class="Sweiper">
<slot></slot>
</div>
</template>
<script>
export default {
name: "Sweiper",
data() {
return{
current:''
}
},
props:{
value:{
type:String,
default:""
},
},
mounted(){
// When searching for name value during automatic carousel, use indexOf method to traverse the following table of the current carousel. =this.$(child=>{
return
});
this. showImg();
this. paly()
},
methods:{
showImg(){
=||this.$children[0].name;
//Direct child components of the current instance this.$(vm=>{
=
})
},
paly(){
//Every time the carousel is adjusted to the picture =setInterval(()=>{
//indexOf returns the first occurrence of a specified string. const index=();
let newIndex=index+1;
//Be more rigorous if (newIndex===){
newIndex=0;
}
this.$emit("input",[newIndex])
},3000)
}
},
watch:{
// Listen to the value value, change it when it changes. value(){
this. showImg()
}
},
beforeDestroy() {
//Before the destruction of the Sil clearInterval()
}
};
</script>
<style>
.Sweiper{
/*border: 1px solid black;*/
width: 100%;
height: 4rem;
overflow: hidden;
margin: 0 auto;
position: relative;
}
</style>
<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 ===;
}
}
};
</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>
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.