Vue 过渡完成轮播图

Vue 过渡

Vue 的过渡体系是内置的，在元素从 DOM 中插进去或移除时自动运用过渡结果。

过渡的完成要在目的元素上运用 transition 属性，详细完成参考Vue2 过渡

下面例子中我们用到列表过渡，能够先进修一下官方的例子

要同时衬着全部列表，比方运用 v-for，我们须要用到 <transition-group> 组件

Vue 轮播图

demo
我们先看如许一个列表

<ul>
  <li v-for="list in slideList">
    <img :src="list.image" :alt="list.desc">
  </li>
</ul>

这个列表要从实例(见文章末端)中获取了三张图片，要使个中的图片发生轮播，我们须要用 <transition-group> 组件替代个中的 ul 标签，从而完成过渡组件的功用，完全的组件 DOM 内容以下，下面分段解释一下

<div class="carousel-wrap" id="carousel">
    // 轮播图列表
    <transition-group tag="ul" class='slide-ul' name="list">
      <li v-for="(list,index) in slideList" :key="index" v-show="index===currentIndex" @mouseenter="stop" @mouseleave="go">
        <a :href="list.clickUrl" >
          <img :src="list.image" :alt="list.desc">
        </a>
      </li>
    </transition-group>
    // 轮播图位置指导
    <div class="carousel-items">
      <span v-for="(item,index) in slideList.length" :class="{'active':index===currentIndex}" @mouseover="change(index)"></span>
    </div>
</div>

对应的数据构造以下：

data: {
    slideList: [
        {
            "clickUrl": "#",
            "desc": "nhwc",
            "image": "http://dummyimage.com/1745x492/f1d65b"
        },
        {
            "clickUrl": "#",
            "desc": "hxrj",
            "image": "http://dummyimage.com/1745x492/40b7ea"
        },
        {
            "clickUrl": "#",
            "desc": "rsdh",
            "image": "http://dummyimage.com/1745x492/e3c933"
        }
    ],
    currentIndex: 0,
    timer: ''
},
    

在运用 v-for 时，应给对应的元素绑定一个 key 属性，相当于 index 标识，在 <transition-group> 组件中，key 是必需的，如许一个轮播图的 DOM 构造就完成了

接下来我们看看轮播函数的完成，再来看组件中的 li 元素

<li v-for="(list,index) in slideList" :key="index">
    <a :href="list.clickUrl" >
      <img :src="list.image" :alt="list.desc">
    </a>
</li>
  

上面经由过程 v-for 衬着了 li 列表，并在个中插进去了包括可点击跳转的图片，接下来看看怎样完成轮播，轮播图的款式直接在后面给出人人 sass 代码，父元素 ul 设置 position: relative;overflow: hidden 后，li 大小设为和父元素雷同，absolute 定位固定在父元素中，要让 li 根据递次显现，须要用到 v-show 或 v-if 处置惩罚，经由过程 index 值来转变当前显现的 li ，本例 v-show 绑定前提 index===currentIndex，用定时器转变 currentIndex 完成轮播

<li v-for="(list,index) in slideList" :key="index" v-show="index===currentIndex" @mouseenter="stop" @mouseleave="go">
    <a :href="list.clickUrl" >
      <img :src="list.image" :alt="list.desc">
    </a>
</li>

实例中的要领：

created() {
    //在DOM加载完成后，下个tick中最先轮播
    this.$nextTick(() => {
        this.timer = setInterval(() => {
            this.autoPlay()
        }, 4000)
    })
},
go() {
    this.timer = setInterval(() => {
        this.autoPlay()
    }, 4000)
},
stop() {
    clearInterval(this.timer)
    this.timer = null
},
change(index) {
    this.currentIndex = index
},
autoPlay() {
    this.currentIndex++
    if (this.currentIndex > this.slideList.length - 1) {
        this.currentIndex = 0
    }
}

DOM 中为每一个轮播 li 元素绑定事宜 @mouseenter="stop" @mouseleave="go" 事宜,使轮播鼠标移入时住手，移出时再次最先。

轮播图如今位置指导，绑定类名 active 转变色彩，绑定 change() 要领，鼠标移到指导点时跳转轮播图

<div class="carousel-items">
  <span v-for="(item,index) in slideList.length" :class="{'active':index===currentIndex}" @mouseover="change(index)"></span>
</div>

sass 款式代码

.carousel-wrap {
  position: relative;
  height: 453px;
  width: 100%;
  overflow: hidden;
  // 删除
  background-color: #fff;
}

.slide-ul {
  width: 100%;
  height: 100%;
  li {
    position: absolute;
    width: 100%;
    height: 100%;
    img {
      width: 100%;
      height: 100%;
    }
  }
}

.carousel-items {
  position: absolute;
  z-index: 10;
  top: 380px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  font-size: 0;
  span {
    display: inline-block;
    height: 6px;
    width: 30px;
    margin: 0 3px;
    background-color: #b2b2b2;
    cursor: pointer;
  }
  .active {
    background-color: $btn-color;
  }
}

滑动动画设置，知识点详见 Vue 教程中的 过渡 css 类名

.list-enter-to {
  transition: all 1s ease;
  transform: translateX(0);
}

.list-leave-active {
  transition: all 1s ease;
  transform: translateX(-100%)
}

.list-enter {
  transform: translateX(100%)
}

.list-leave {
  transform: translateX(0)
}

完全 Vue 实例以下

new Vue({
    el: '#carousel',
    data: {
        slideList: [
            {
                "clickUrl": "#",
                "desc": "nhwc",
                "image": "http://dummyimage.com/1745x492/f1d65b"
            },
            {
                "clickUrl": "#",
                "desc": "hxrj",
                "image": "http://dummyimage.com/1745x492/40b7ea"
            },
            {
                "clickUrl": "#",
                "desc": "rsdh",
                "image": "http://dummyimage.com/1745x492/e3c933"
            }
        ],
        currentIndex: 0,
        timer: ''
    },
    methods: {
        go() {
            this.timer = setInterval(() => {
                this.autoPlay()
            }, 4000)
        },
        stop() {
            clearInterval(this.timer)
            this.timer = null
        },
        change(index) {
            this.currentIndex = index
        },
        autoPlay() {
            this.currentIndex++
            if (this.currentIndex > this.slideList.length - 1) {
                this.currentIndex = 0
            }
        }
    },
    created() {
        this.$nextTick(() => {
            this.timer = setInterval(() => {
                this.autoPlay()
            }, 4000)
        })
    }
})

以上就是 Vue 过渡完成的轮播图，喜好的话请关注，点赞，珍藏~感谢