一个基于vue的图片轮播组件的实现

DevTalking 发布于2019-08-22 16:49 / 1549人阅读

摘要：在线首先是一张思维导图然后是以上属性的标注说明代码层除去可从父组件接收的属性，组件自身有以下属性当前显示的图片列表鼠标是否悬浮在组件上自动切换的每项元素的宽度是否是反向切换，触发时，该属性为组件挂载之前计算每项元素的宽度，即的值初始化显示

1. 在线DEMO

http://va-carousel.xiaoshang.online

Github

2. 首先是一张思维导图

3. 然后是以上属性的标注说明

4. 代码层

4.1 除去可从父组件接收的属性，组件自身有以下属性：

data() {
    return {
      list: [],     // 当前显示的图片列表
      hover: false, // 鼠标是否悬浮在组件上
      timer: null,  // 自动切换的 setInterval
      itemWidth: "",// 每项元素的宽度
      isReverse: false // 是否是反向切换，触发prev时，该属性为true
    }
  }

4.2 组件挂载之前

计算每项元素的宽度，即itemWidth的值

初始化显示的图片列表，即list。这里存储的数据才是真正会被在页面上渲染的。每次切换，实际上就是修改该list中的数据，对应的视图会自动更新，数据驱动视图嘛。

beforeMount() {
    this.itemWidth = 100 / this.total + "%"
    this.list = this.items.slice(0, this.total)
  },

4.3 组件挂在后，检查autoplay属性，若该属性为true，则产生一个计时器

mounted() {
    if (this.autoplay) {
      this.startTimer()
    }
  },

4.4 startTimer函数很简单,就是间隔一定时间触发一次next(向后)切换

// 开始计时器
startTimer() {
    if (!this.interval || this.interval <= 0) {
        return
    }
    this.timer = setInterval(this.next, this.interval)
}

4.5 next函数

    // 下一张
    next() {
      // 如果图片列表小于需要显示的数量，则不进行滚动
      if (this.items.length < this.total) {
        return
      }

      // 向后追加一个元素，该元素为：
      // 显示列表中最后一个元素在原数组中的后一个元素
      // 如果已经是最后一个元素，则使用第一个元素

      let indexOfItems = this.items.findIndex(
        item => item.id === this.list[this.list.length - 1].id
      )

      if (indexOfItems === this.items.length - 1) {
        // 使用第一个元素
        this.list.push(this.items[0])
      } else {
        // 使用后一个元素
        this.list.push(this.items[indexOfItems + 1])
      }
      // 移除当前显示图片中的第一个
      this.list.shift()
      this.isReverse = false
    },

4.6 对应的还有一个prev函数，与next函数逻辑相反，这里就不展示代码了

4.7 点击图片时，向父组件释放事件selectedItem，传递两个参数 item 和 index 分别为当前点击的对象，和该对象在list中的位置

    // 点击图片
    selectedItem(item, index) {
      this.$emit("selectedItem", item, index)
    },

4.8 鼠标悬浮在组件上时，停止自动切换（若autoplay为ture）, 鼠标离开时，继续切换

    handleMouseEnter() {
      this.hover = true
      this.pauseTimer()
    },

    handleMouseLeave() {
      this.hover = false
      if (this.autoplay) {
        this.startTimer()
      }
    },

4.9 然后是过渡效果的实现

因为arrow元素也在transition-group中，所以当arrow=‘hover’时，arrow的显示、隐藏也会触发钩子函数，但是我们的钩子函数是针对image-item写的，所以需要在函数中检测是哪个元素触发的，这里通过检查className进行判断。
然后针对向前、向后两种情况设置不同的样式

 beforeEnter(el) {
      // 只对image-item使用过渡
      let isImageItem = el.className.indexOf("image-item") > -1
      if (isImageItem) {
        el.style.opacity = 0
        if (this.isReverse) {
          el.style.transform = "translateX(-100%)"
        } else {
          el.style.transform = "translateX(100%)"
        }
      }
    }

4.10 这里使用了Velocity，这是一个实现动画效果的js库，之所以使用这个库是因为试了n种方案都没能实现预期效果emm

enter(el, done) {
      // 只对image-item使用过渡
      let isImageItem = el.className.indexOf("image-item") > -1
      if (isImageItem) {
        Velocity(el, { opacity: 1, translateX: "0px" }, { complate: done })
      } else {
        done()
      }
    }

4.11 然后是对应的beforeLeave、leave函数，这里就不展示了

以上基本就是所有js部分，整体感受就是，一旦实现逻辑搞清楚，代码实现起来还是挺容易的，然后就是框架的熟悉程度。

5. npm包发布

这本是公司业务中的一个功能需求，因为没能在网上找到现成的轮子，找个差不多的效果领导不满意，所以只能自己写了，做都做了不发出来岂不是白写了. . .

npm发布流程简单概括就是

1.注册

去npm官网注册个账号

2.生成npm包文件夹中有package.json文件就是一个npm包

3.在终端使用npm publish发布包，成功之后，该项目文件夹下所有文件都会上传至npm官网，当用户使用npm install安装后，就会将整个文件夹下载至node_modules文件夹中，对于这个项目，就是一个使用vue-cli生成的vue项目，组件路径src/components/VaCarousel.vue，所以使用npm install va-carousel安装之后，只需要在项目中像这样导入即可使用(前提是你的项目也是使用vue-cli生成的，对于其他方式建立的项目可能会出现一些错误)：import VaCarousel from "va-carousel/src/components/VaCarousel.vue"

以上

专线服务超融合服务器 vue轮播组件基于webrtc的电话回声消除的研究与实现基于webrtc的视频会议系统的设计与实现基于防火墙技术的校园网络安全设计与实现

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

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

基于 Vue 实现的移动端图片轮播组件.

摘要：基于的移动端的图片轮播组件之前一直在用功能很齐全但是唯一的问题就是体积比较大我只是想要一个简单的图片轮播但是却要引入多大小的文件这样是不对的特点支持自动播放无限轮播效果支持用户手动滑动压缩后大概使用在入口文件中引入暂时不支持单组 wc-swiper 基于 Vue 的移动端的图片轮播组件. why 之前一直在用 vue-awesome-swiper, 功能很齐全, 但是唯一的问题就是体积...

hsluoyz 2019-08-20 18:52 评论0 收藏0
基于vue实现swipe轮播组件

摘要：项目背景图片轮播是前端项目必有项，当前有很多效果很酷炫的轮播插件，例如。此处应该有掌声，哈哈简而言之，就是当需要一个简单的轮播时，可以选用，自己写一个组件。举个栗子，就是我实现的这个基于实现分页组件，移动端和端均适用哦。项目背景图片轮播是前端项目必有项，当前有很多效果很酷炫的轮播插件，例如Swiper。但是当项目中的图片轮播只需要一个很简单的轮播样式，比如这样的showImg(ht...

Enlightenment 2019-08-22 10:42 评论0 收藏0
基于vue实现swipe轮播组件

摘要：项目背景图片轮播是前端项目必有项，当前有很多效果很酷炫的轮播插件，例如。此处应该有掌声，哈哈简而言之，就是当需要一个简单的轮播时，可以选用，自己写一个组件。举个栗子，就是我实现的这个基于实现分页组件，移动端和端均适用哦。项目背景图片轮播是前端项目必有项，当前有很多效果很酷炫的轮播插件，例如Swiper。但是当项目中的图片轮播只需要一个很简单的轮播样式，比如这样的showImg(ht...

lavor 2019-08-05 10:19 评论0 收藏0
当大多数人对Vue理解到炉火纯青的时候，是不是该思考一下怎么让vue页面骚气起来

写在前面当大多数人Vue理解的炉火纯青的时候，你应该思考怎么让vue页面骚气起来，下面就我个人在接触Vue两年的时间里，在实际工作中门户网站在前端页面交互应用和技巧，炒几道小菜给大家分享一哈，我把它封装成一个项目vue-portal-webUI（github源码），不敢说是UI，但也是各种常见常遇到的情景吧，看懂代码需要一些vue、axios、es6、scss基础、数据基本上是mock，功能和场...

lingdududu 2019-08-26 12:12 评论0 收藏0
Vue 过渡实现轮播图

摘要：过渡实现轮播图过渡的过渡系统是内置的，在元素从中插入或移除时自动应用过渡效果。 Vue 过渡实现轮播图 Vue 过渡 Vue 的过渡系统是内置的，在元素从 DOM 中插入或移除时自动应用过渡效果。过渡的实现要在目标元素上使用 transition 属性，具体实现参考Vue2 过渡下面例子中我们用到列表过渡，可以先学习一下官方的例子要同时渲染整个列表，比如使用 v-for，我们需要...

zr_hebo 2019-08-21 15:29 评论0 收藏0