vue-slide轮播笔记

在做练习的时候，在vue开发中我们可以自己写一个轮播组件，里面用到了父子组件的传递，学习一下，并记录下来

父组件：index.vue
子组件：slideShow.vue

1.向index中导入并注册组件

import slideShow from '../components/slideShow.vue'
 components:{
    slideShow
  },
dom中使用：
  

2.编写slideShow子组件(静态)

  

      

          
                  
          
      
      
title标题
      

          
<
          

              1
              1
          
          
>
      
  

3.在父组件中，编写数据属性并通过props向子组件传递

data(){
      return{
             invTime: 2000,
      slides: [
        {
          src: require('../assets/slideShow/pic1.jpg'),
          title: 'xxx1',
          href: 'detail/analysis'
        },
        {
          src: require('../assets/slideShow/pic2.jpg'),
          title: 'xxx2',
          href: 'detail/count'
        },
        {
          src: require('../assets/slideShow/pic3.jpg'),
          title: 'xxx3',
          href: 'http://xxx.xxx.com'
        },
        {
          src: require('../assets/slideShow/pic4.jpg'),
          title: 'xxx4',
          href: 'detail/forecast'
        }
      ],

使用：

4.编写子组件里面的方法，通过props定义父组件的属性，slides和inv
子组件的结构：

js定义：

export default {
  props:{
      slides:{
          type:Array,
          default:[]
      },
      inv:{
          type:Number,
          default:1000
      }
  },
  data(){
      return{
          nowIndex:0,
          show:true
      }
  },
  methods:{
      goto(index){
          this.show=false;
          setTimeout(()=>{
              this.show=true
              this.nowIndex=index;
              this.$emit('onchange',index) //向父组件传递事件 onchange
          },10)
          
      },
      runIv(){
          this.inId=setInterval(()=>{
              this.goto(this.next)
            //   console.log(1234)
          },this.inv)
      },
      clearIv(){
          clearInterval(this.inId)
      }
  },
  mounted(){
      this.runIv();
  },
  computed:{
      prev(){
          if(this.nowIndex===0){
              return this.slides.length-1
          }else{
              return this.nowIndex-1
          }
      },
      next(){
          if(this.nowIndex===this.slides.length-1){
              return 0
          }else{
              return this.nowIndex+1
          }
      }
  }
}

5.在轮播的时候加入过渡效果
css中注意transition的使用，在vue中也是有的，可加以利用

.slide-trans-enter-active {
  transition: all .5s;
}
.slide-trans-enter {
  transform: translateX(900px);
}
.slide-trans-old-leave-active {
  transition: all .5s;
  transform: translateX(-900px);
}

6.整体的css也写上吧：

最后的效果：

image.png