Vue 过渡实现轮播图

zr_hebo 发布于2019-08-21 15:29 / 2412人阅读

摘要：过渡实现轮播图过渡的过渡系统是内置的，在元素从中插入或移除时自动应用过渡效果。

Vue 过渡实现轮播图 Vue 过渡

Vue 的过渡系统是内置的，在元素从 DOM 中插入或移除时自动应用过渡效果。

过渡的实现要在目标元素上使用 transition 属性，具体实现参考Vue2 过渡

下面例子中我们用到列表过渡，可以先学习一下官方的例子

要同时渲染整个列表，比如使用 v-for，我们需要用到组件

Vue 轮播图

demo
我们先看这样一个列表

这个列表要从实例(见文章末尾)中获取了三张图片，要使其中的图片产生轮播，我们需要用组件替换其中的 ul 标签，从而实现过渡组件的功能，完整的组件 DOM 内容如下，下面分段解释一下

对应的数据结构如下：

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 标识，在组件中，key 是必须的，这样一个轮播图的 DOM 结构就完成了

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

上面通过 v-for 渲染了 li 列表，并在其中插入了包含可点击跳转的图片，接下来看看如何实现轮播，轮播图的样式直接在后面给出大家 sass 代码，父元素 ul 设置 position: relative;overflow: hidden 后，li 大小设为和父元素相同，absolute 定位固定在父元素中，要让 li 按照顺序显示，需要用到 v-show 或 v-if 处理，通过 index 值来改变当前显示的 li ，本例 v-show 绑定条件 index===currentIndex，用定时器改变 currentIndex 实现轮播

实例中的方法：

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() 方法，鼠标移到指示点时跳转轮播图

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 过渡实现的轮播图，喜欢的话请关注，点赞，收藏~谢谢

专线服务私有云 react实现轮播图轮播图写轮播图将轮播图

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88198.html

原生js写一个无缝轮播图插件(支持vue)

摘要：轮播图插件前言写这个插件的原因前段时间准备用加上网易云的接口，模拟网易云音乐移动端。目前主要实现了无缝轮播，自动播放，端左右按钮点击切换，移动端手势滑动切换。轮播图插件(Broadcast.js) 前言：写这个插件的原因前段时间准备用vue加上网易云的nodejs接口，模拟网易云音乐移动端。因为想自己写一遍所有的代码以及加固自己的flex布局，所以没有使用UI组件。在轮播图部分，...

MSchumi 2019-08-02 16:03 评论0 收藏0
原生js写一个无缝轮播图插件(支持vue)

摘要：轮播图插件前言写这个插件的原因前段时间准备用加上网易云的接口，模拟网易云音乐移动端。目前主要实现了无缝轮播，自动播放，端左右按钮点击切换，移动端手势滑动切换。轮播图插件(Broadcast.js) 前言：写这个插件的原因前段时间准备用vue加上网易云的nodejs接口，模拟网易云音乐移动端。因为想自己写一遍所有的代码以及加固自己的flex布局，所以没有使用UI组件。在轮播图部分，...

hatlonely 2019-08-22 18:09 评论0 收藏0
原生js写一个无缝轮播图插件(支持vue)

摘要：轮播图插件前言写这个插件的原因前段时间准备用加上网易云的接口，模拟网易云音乐移动端。目前主要实现了无缝轮播，自动播放，端左右按钮点击切换，移动端手势滑动切换。轮播图插件(Broadcast.js) 前言：写这个插件的原因前段时间准备用vue加上网易云的nodejs接口，模拟网易云音乐移动端。因为想自己写一遍所有的代码以及加固自己的flex布局，所以没有使用UI组件。在轮播图部分，...

褰辩话 2019-08-30 15:53 评论0 收藏0
[vue组件]无缝轮播图

摘要：实现原理无缝滚动预处理为了无缝滚动，在传进来的数组首部增加末尾元素，在尾部追加首元素看图数据绑定视图为当前显示的轮播图索引，然后只需要对进行操作，监听的变化，一旦到达了边界就重置，显示出对应的图片。该文章请对应源码阅读，github源码地址，DEMO使用地址，线上DEOM展示。做一个vue基础组件系列，使用vue以最简洁的方式实现常用组件，可用于快速二次定制化开发。 (๑•̀ㅂ•́...

GHOST_349178 2019-08-30 13:47 评论0 收藏0
[vue组件]无缝轮播图

摘要：实现原理无缝滚动预处理为了无缝滚动，在传进来的数组首部增加末尾元素，在尾部追加首元素看图数据绑定视图为当前显示的轮播图索引，然后只需要对进行操作，监听的变化，一旦到达了边界就重置，显示出对应的图片。该文章请对应源码阅读，github源码地址，DEMO使用地址，线上DEOM展示。做一个vue基础组件系列，使用vue以最简洁的方式实现常用组件，可用于快速二次定制化开发。 (๑•̀ㅂ•́...

Clect 2019-08-21 17:04 评论0 收藏0