Vue to achieve seamless rotation effect (running lantern)

Time:2021-9-30

This example shares the specific code of Vue to achieve seamless rotation effect for your reference. The specific contents are as follows

1. First create two Vue components sweiper.vue and sweiperitem.vue;

2. Introduce the two components into the page and use V-model to transfer parameters in sweiper.vue(V-model is actually a syntax sugar, with default attribute value and default event input);
In the code, I pass the value to sweiper (subcomponent) through selced of V-model, and the subcomponent is triggered during automatic rotationInput eventPass the value to be displayed back to the parent component

3. The core is to transfer the selected value to sweiperitem, which is equal to the name value in sweiperitem, and judge which picture to display;

<template>
  <div>
    <Sweiper v-model="selected">
      <!-- V-model is a syntax sugar, equivalent to value and input events -- >
      <Sweiper-item  name="item1">
        <div>
          <img :src="getImg('01')" alt="">
        </div>
      </Sweiper-item>
      <Sweiper-item name="item2">
        <div>
          <img :src="getImg('02')" alt="">
        </div>
      </Sweiper-item>
      <Sweiper-item name="item3">
        <div>
          <img :src="getImg('03')" alt="">
        </div>
      </Sweiper-item>
    </Sweiper>
  </div>
</template>
The picture here does not use the V-for loop through the array, which is convenient for you to see its structure
<script>
  import Sweiper from "../components/Sweiper.vue";
  import SweiperItem from "../components/SweiperItem.vue";
  export default {
    name: "mySweiper",
    components: {
      Sweiper,
      SweiperItem
    },
    data() {
      return {
        Selected: "Item1", // the default is the first one
      }
    },
    methods:{
      getImg(url){
        return "img/"+url+".jpg"
      },

    },
    mounted(){
      /*setInterval(()=>{
       this.selected="item2"
  },3000)
  At this time, because mounted is executed only once, it remains unchanged. You need to write a watch monitor in sweiper
    }*/This step is annotated because it is written in the sweiper component
  }
</script>
<style >
  .item{
    /*border: 1px solid black;*/
  }
  .item>img{
    width: 100%;
    /*height: 0.1rem;*/
  }
</style>

Sweiper.vue

<template>
  <div>
    <slot></slot>
  </div>
</template>
<script>

  export default {
    name: "Sweiper",
    data() {
      return{
        current:''
      }
    },
    props:{
      value:{
        type:String,
        default:""
      },
    },
    mounted(){
      //During automatic rotation, find the name value and traverse the following table of the current rotation with the indexof method
      this.names=this.$children.map(child=>{
       return child.name
      });
      this. showImg();
      this. paly()
    },
    methods:{
      showImg(){
        this.current=this.value||this.$children[0].name;
        //Direct child component of the current instance
        this.$children.map(vm=>{
          vm.selected=this.current
        })
      },

      paly(){
        //Adjust the picture every time
        this.timer=setInterval(()=>{
          //Indexof returns the first occurrence of a specified string
          const index=this.names.indexOf(this.current);
          let newIndex=index+1;
          //Be rigorous
          if (newIndex===this.names.length){
             newIndex=0;
          }
          this.$emit("input",this.names[newIndex])
        },3000)
      }
    },
    watch:{
      //Listen to the value value and change the selected if it changes
      value(){
        this. showImg()
      }
    },
    beforeDestroy() {
      //Before actual destruction
      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>

The above is the whole content of this article. I hope it will be helpful to your study, and I hope you can support developpaer.