vue-slide轮播笔记

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

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

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

import slideShow from '../components/slideShow.vue'
 components:{
    slideShow
  },
dom中使用：
  <slide-show></slide-show>

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

  <div class="slide-show" >
      <div class="slide-img">
          <a href="">
                  <img v-if="show" :src="slides[nowIndex].src" alt="">
          </a>
      </div>
      <h2>title标题</h2>
      <ul class="slide-pages">
          <li>&lt;</li>
          <li>
              <a>1</a>
              <a>1</a>
          </li>
          <li >&gt;</li>
      </ul>
  </div>

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'
        }
      ],

使用：

      <slide-show :slides="slides" :inv="invTime" @onchange="onchangedosomething"></slide-show>

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

<template>
  <div class="slide-show" @mouseover="clearIv" @mouseout="runIv">
      <div class="slide-img">
          <a :href="slides[nowIndex].href">
              <transition name="slide-trans">
                  <img v-if="show" :src="slides[nowIndex].src" alt="">
              </transition>
              <transition name="slide-trans-old">
                  <img v-if="!show" :src="slides[nowIndex].src" alt="">
              </transition>
          </a>
      </div>
      <h2>{{slides[nowIndex].title}}</h2>
      <ul class="slide-pages">
          <li @click="goto(prev)">&lt;</li>
          <li v-for="(item,index) in slides" @click="goto(index)">
              <a :class="{on:index===nowIndex}">{{index+1}}</a>
          </li>
          <li @click="goto(next)">&gt;</li>
      </ul>
  </div>
</template>

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也写上吧：

<style scoped>
.slide-trans-enter-active {
  transition: all .5s;
}
.slide-trans-enter {
  transform: translateX(900px);
}
.slide-trans-old-leave-active {
  transition: all .5s;
  transform: translateX(-900px);
}
.slide-show {
  position: relative;
  margin: 15px 15px 15px 0;
  width: 900px;
  height: 500px;
  overflow: hidden;
}
.slide-show h2 {
  position: absolute;
  width: 100%;
  height: 100%;
  color: #fff;
  background: #000;
  opacity: .5;
  bottom: 0;
  height: 30px;
  text-align: left;
  padding-left: 15px;
}
.slide-img {
  width: 100%;
}
.slide-img img {
  width: 100%;
  position: absolute;
  top: 0;
}
.slide-pages {
  position: absolute;
  bottom: 10px;
  right: 15px;
}
.slide-pages li {
  display: inline-block;
  padding: 0 10px;
  cursor: pointer;
  color: #fff;
}
.slide-pages li .on {
  text-decoration: underline;
}
</style>

最后的效果：

image.png