Vue realizes seamless carousel diagram
Carousel pictures ideas
A set of pictures is constantly looping. If it cycles to the last picture, it starts from the first picture and keeps looping. We can set the time for the picture to switch.
1. First, we define the data we need to use in data in an array, and then define the value of the image currently displayed on the page, which defaults to 0.
data() {
return {
v:0,
imglist:[
{"id":0,img:"/pics/"},
{"id":1,img:"/pics/"},
{"id":2,img:"/pics/"},
]
}
},2. We render the defined data into the page. v-show uses three-points to determine whether the defined value and subscript are equal. If the equal value is true (show), otherwise the value is false (hide)
<div class="imgbox"> <img :src="" alt="" v-for="(item, index) in imglist" :key="index" v-show="v==index?true:false"> </div>
3. The next step is to make the carousel graph run. Created() is a property in the life cycle. Its function is to implement the function execution when the project is started. First set a timer and set two seconds, which means the image is switched every two seconds, and then make a judgment. If the defined value is greater than the length of the picture number, then let the value = 0, start from the first picture. Otherwise, let the image continue to increase and continuously achieve the effect of the carousel graph.
created(){
setInterval(() => {
if(>=2){
=0
}
else{
++
}
}, 2000);
}Seamless carousel (marionette effect)
1. First create two vue components and;
2. Introduce two components into the page, and pass parameters with v-model (v-model is actually syntax sugar, default attribute value and default event input); in the code, I pass the value to Sweiper (subcomponent) through the selcted of v-model. When the child component automatically carouses, the input event will be triggered and the displayed value will be returned to the parent component.
3. The core is to pass the selected value to the SweiperItem, and determine which picture to display with the same name value as 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 personal experience. I hope you can give you a reference and I hope you can support me more.