vue轮播组件实现$children和$parent 附带好用的gif录制工具

1、先提前预祝大家国庆节玩的愉快,我国庆要见家长去了(忐忑)

2、忍不住想要为小米正名,虽然我是米粉但是我是理智粉。

24号不是mix alpha发布会啊,看了真滴是惊艳(现场直接有人喊“ 牛逼 ”,看过好多发布会,就没有看到这样直接喊出来“牛逼”的)。不知道大家还记不记得13年那会吹苹果的时候的一块ppt手机(其实是媒体做的图),但是现在小米做出来了,甚至更好。但是我最近在uc上面那真是到处黑。以前我不相信水军说法,现在信了。如果关注小米mix alpha新闻的在uc下面经常能看到一个叫“决胜千里”的人,每次都是千篇一律的复制黏贴黑。

我想说,没买过没资格。就像写代码,没写过别说懂。写了你才知道这里面有哪些细节和关键因素。

写这个组件起因

记得就这两天有掘友发一个沸点说找女票千万别找同行,好了,曾经我是erp软件实施,现在转前端。女票也是前端。然后她发我一个链接(打不开看gif图):http://ipark.jsboon.com/static/dashboard/yjw/yjw.html

这个链接的最右侧有一个轮播的效果。说起来这整个页面是不咋的,不过里面涉及的东西都比较复杂。 附带gif录制工具:http://www.zdfans.com/html/1754.html

回到刚才说的,女票,对女票。不懂问我,就像之前评论的,干脆让我写得了。这下好了报应来了。(说起来真是无语,她比我早干一年,结果还不如我写了1年前端)

说起来我还没写过这种轮播组件,但是之前去看过源码,并且了解过。如果是写死的那种确实比较简单。但是我们今天用vue封装一个组件。

一、知识点涉及

1、vue组件化开发

2、vue组件嵌套组,就是两个组件相互耦合,然后必须配合使用的那种。参考elementUI里面的表单组件(分为from组件,item组件)或者轮播组件。

vue的 $children和 $parent

3、css动画和形变

二、开始写组件

1、先写你的框,主组件

这个是容器,负责组件定位和组件的整体运作的

html部分

<div
 @mouseenter.stop="handleMouseEnter"
 @mouseleave.stop="handleMouseLeave"
 class="dht-swiper-side"
 :style="{ zIndex: zIndex }"
>
 <slot></slot>
</div>

主要两个鼠标事件: mouseenter和 mouseleave

第一个就是鼠标在元素上负责停止定时器,第二个就是鼠标离开重启定时器

对应的props和监听

props: {
 // 时间间隔
 interval: {
  type: Number,
  default: 8000
 },
 //是否自动播放
 autoplay: {
  type: Boolean,
  default: true
 },
 zIndex: {
  type: Number,
  default: 2000
 },
 // x轴变化
 axisx: {
  type: Number,
  default: 1000
 }
},
watch: {
 autoplay(val) {
  val ? this.startTimer() : this.stopTimer();
 }
},
data() {
 return {
  // 计时器
  timer: "",
  //子元素
  items: [],
  // 当前显示的元素
  active: 0
 };
},

看看就好,没啥多说的,我感觉挺清晰的

2、写你的子组件

这里必须跳跃一下,为什么呢?

因为:主组件主要负责动画运作和容器的作用。定义好你要的参数之后,其实主组件你直接看代码是不不符合编写逻辑的

有了主组件之后,我需要有子元素才能动起来,所以先把子元素加载进来

html部分

<div class="dht-swiper-side-item" :style="itemStyle">
 <slot></slot>
</div>

js核心部分

created() {
 //元素创建和需要更新父元素属性
 this.$parent && this.$parent.updateItems();
},
beforeMount() {},
mounted() {},
destroyed() {
 //元素销毁和需要更新父元素属性
 this.$parent && this.$parent.updateItems();
},

这里主要是创建元素的时候需要把元素加入主组件的items中,销毁的时候同样进行更新

主组件的更新代码

// 更新元素
updateItems() {
 this.items = this.$children.filter(
  // 更新元素需要确认为指定的子元素
  child => child.$options.name === "dhtSwiperSideItem"
 );
},

css核心部分

css部分主要是定义动画效果,和基础css,主要是看动画部分

.dht-swiper-side-item {
 position: absolute;
 transition: all 1s ease;
 transform: translateX(1000px);
 // 抖动动画
 @keyframes mymove {
  0% {
   left: 0;
  }
  50% {
   left: 15px;
  }
  100% {
   left: 0;
  }
 }
}

3、一般弹窗动画之类的编写原理讲解

1、不能用display:none,因为那样元素是直接显示出来的,动画是无法有的。

2、举例:下方弹窗划出

其实在写这些弹窗的时候元素已经在页面上面加载好了,只是被我们隐藏到显示器之外了。

所以我们要做的是在点击显示的时候把元素位移回来

3、所以其实页面上基本的动画都是先放在你看不到的地方,然后再通过 transform

形变css给移动回来的。我这次的组件也是一样的。

4、主组件操作

1、回顾一下,刚才我们先写了主组件,主组件加载子组件,子组件会调用主组件函数,让主组件去更新自己的items,提前存好。方便使用

2、既然我们主组件拿到了子组件了,那么就可以直接操作子组件进行操作,其实核心原理在于主组件之间操作子组件。(我看了elementUI源码的走马灯部分,写的比我复杂。)

3、定时器部分

//开始计时器
startTimer() {
 //预先执行一次,保证不会出现第一次运行延迟双倍实际
 this.play();
 // 拦截处理
 if (this.interval <= 0 || !this.autoplay || this.timer) return;
 this.timer = setInterval(() => {
  this.play();
 }, this.interval);
},

这块其实没啥,除了预先的拦截剩下的就是启动定时器,然后运行动画播放函数

4、核心播放函数部分

//播放实际运行函数
play() {
 let len = this.items.length - 1;
 let now = this.active > len ? 0 : this.active;
 let old = this.active - 1 < 0 ? 0 : this.active - 1;
 //console.log("当前", now, "老的", old);
 //关闭老元素
 this.items[old].show = false;
 this.items[old].itemStyle = {
  transition: "all 1.5s ease",
  transform: `translateX(${this.axisx}px)`
 };
 //显示新元素
 this.items[now].show = true;
 this.items[now].itemStyle = {
  transition: "all 1.5s ease",
  transform: "translateX(0)",
  animation: "mymove 1.5s 2"
 };
 //记录数据
 this.active = now + 1;
}

这个其实很简单,每次运行的时候处理一下数据,拿到当前要运行的子元素id和老的元素,当前的展示,老的移动回去。最后记录一下新的id

这里有一个坑点:就是animation部分,记得运行2次,不然只是一次会导致下面的元素看不到抖动效果。原因是在移动的时候就抖动完毕了。

5、主组件css部分

.dht-swiper-side {
 position: absolute;
 z-index: 2000;
 right: 0;
 display: flex;
 flex-flow: row;
 width: 100%;
}

三、组件文档

dht-swiper-side 侧边轮播组件 interval Number 5000 时间间隔,默认5秒转换一次 必须给该组件指定宽度,否则无法正常显示。 内部子元素展示做最侧位置主要由该组件的宽度定义
autoplay Boolean TRUE 是否自动播放,咱不支持false
zIndex Number 2000 组件层级
axisx Number 1000 隐藏的子元素位置,px单位,默认1000。当内部元素宽度过大时可以调节该参数
dht-swiper-side-item dht-swiper-side dht-swiper-side的子组件,用于存放内容

四、个人组件效果展示

<dht-swiper-side class="main">
 <dht-swiper-side-item>
  <div class="item">我是组件1</div>
 </dht-swiper-side-item>
 <dht-swiper-side-item>
  <div class="item">我是组件2</div>
 </dht-swiper-side-item>
 <dht-swiper-side-item>
  <div class="item">我是组件3</div>
 </dht-swiper-side-item>
 <dht-swiper-side-item>
  <div class="item">我是组件4</div>
 </dht-swiper-side-item>
</dht-swiper-side>

.main {
 width: 500px;
 .item {
  width: 100px;
  height: 100px;
  background: #009966;
  border: #409eff 1px solid;
  text-align: center;
  line-height: 100px;
 }
}

主组件全部代码

<template>
 <div
  @mouseenter.stop="handleMouseEnter"
  @mouseleave.stop="handleMouseLeave"
  class="dht-swiper-side"
  :style="{ zIndex: zIndex }"
 >
  <slot></slot>
 </div>
</template>

<script>
export default {
 name: "dhtSwiperSide",
 props: {
  // 时间间隔
  interval: {
   type: Number,
   default: 8000
  },
  //是否自动播放
  autoplay: {
   type: Boolean,
   default: true
  },
  zIndex: {
   type: Number,
   default: 2000
  },
  // x轴变化
  axisx: {
   type: Number,
   default: 1000
  }
 },
 watch: {
  autoplay(val) {
   val ? this.startTimer() : this.stopTimer();
  }
 },
 data() {
  return {
   // 计时器
   timer: "",
   //子元素
   items: [],
   // 当前显示的元素
   active: 0
  };
 },
 beforeCreate() {},
 created() {
  this.$nextTick(() => {
   this.updateItems();
   this.startTimer();
   this.$children[0].show = true;
  });
 },
 beforeMount() {},
 mounted() {},
 destroyed() {
  clearInterval(this.timer);
 },
 methods: {
  handleMouseEnter() {
   this.stopTimer();
  },

  handleMouseLeave() {
   this.startTimer();
  },
  //开始计时器
  startTimer() {
   //预先执行一次,保证不会出现第一次运行延迟双倍实际
   this.play();
   // 拦截处理
   if (this.interval <= 0 || !this.autoplay || this.timer) return;
   this.timer = setInterval(() => {
    this.play();
   }, this.interval);
  },
  // 停止计时器
  stopTimer() {
   clearInterval(this.timer);
  },
  // 更新元素
  updateItems() {
   this.items = this.$children.filter(
    // 更新元素需要确认为指定的子元素
    child => child.$options.name === "dhtSwiperSideItem"
   );
  },
  //播放实际运行函数
  play() {
   let len = this.items.length - 1;
   let now = this.active > len ? 0 : this.active;
   let old = this.active - 1 < 0 ? 0 : this.active - 1;
   //console.log("当前", now, "老的", old);
   //关闭老元素
   this.items[old].show = false;
   this.items[old].itemStyle = {
    transition: "all 1.5s ease",
    transform: `translateX(${this.axisx}px)`
   };
   //显示新元素
   this.items[now].show = true;
   this.items[now].itemStyle = {
    transition: "all 1.5s ease",
    transform: "translateX(0)",
    animation: "mymove 1.5s 2"
   };
   //记录数据
   this.active = now + 1;
  }
 }
};
</script>

<style lang="scss">
.dht-swiper-side {
 position: absolute;
 z-index: 2000;
 right: 0;
 display: flex;
 flex-flow: row;
 width: 100%;
}
</style>

子组件全部代码

<template>
 <div class="dht-swiper-side-item" :style="itemStyle">
  <slot></slot>
 </div>
</template>

<script>
export default {
 name: "dhtSwiperSideItem",
 data() {
  return {
   show: false,
   defaultStyle: {},
   itemStyle: {}
  };
 },
 watch: {},
 beforeCreate() {},
 created() {
  //元素创建和需要更新父元素属性
  this.$parent && this.$parent.updateItems();
 },
 beforeMount() {},
 mounted() {},
 destroyed() {
  //元素销毁和需要更新父元素属性
  this.$parent && this.$parent.updateItems();
 },
 methods: {}
};
</script>

<style lang="scss">
.dht-swiper-side-item {
 position: absolute;
 transition: all 1s ease;
 transform: translateX(1000px);
 // 抖动动画
 @keyframes mymove {
  0% {
   left: 0;
  }
  50% {
   left: 15px;
  }
  100% {
   left: 0;
  }
 }
}
</style>

致谢

感谢elementUI开源代码,本组件有部分是直接拷贝的elementUI的Carousel的代码。

总结

以上所述是小编给大家介绍的vue轮播组件实现$children和$parent 附带好用的gif录制工具,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

(0)

相关推荐

  • 基于vue实现swipe轮播组件实例代码

    项目背景 图片轮播是前端项目必有项,当前有很多效果很酷炫的轮播插件,例如Swiper. 但是当项目中的图片轮播只需要一个很简单的轮播样式,比如这样的 我们引用这样一个110k的大插件,就大材小用了.再安利一下,swiper2.x和swiper3.x对移动和PC端支持情况如下图 当当当当~~~ 我们今天的主角登场了,thebird/Swipe,这个插件完成了图片轮播需要的基本功能,只有14.2k,真真的轻量级 啊.还有,还有 翻译一下,就是俺们全支持,不管你是PC端(IE7+)还是移动端浏览器.此

  • Vue实现内部组件轮播切换效果的示例代码

    对于那些不需要路由的内部组件,在切换的时候希望增加一个轮播过渡的效果,效果如下: 我们可以引入一个轮播组件,但是有个问题,通常轮播组件都会把所有的slide都渲染出来再进行切换,这样就导致所有的资源都会触发加载,这可能不是我们所期待的,毕竟如果slide比较多的情况需要一次性加载的图片等资源太多了.所以我们可以手动简单地写一个,满足需求即可. 现在一步步来实现这个功能,先写一个实现基本切换的demo. 1. 实现切换 先用vue-cli搭建一个工程脚手架,使用以下命令: npm install

  • 基于vue.js轮播组件vue-awesome-swiper实现轮播图

    一般做移动端轮播图的时候,最常用的就是Swiper插件了,而vue.js也有一个轮播组件vue-awesome-swiper,用法跟swiper相似. 1.安装vie-awesome-swiper nam install vue-awesome-swiper --save-dev 2.引用vie-awesome-swiper组件,这里我是用vie-cli创建的项目,在main.js: import VueAwesomeSwiper from 'vue-awesome-swiper'; Vue.u

  • 基于Vue2x实现响应式自适应轮播组件插件VueSliderShow功能

    VueSliderShow故名思意,vue的轮播图组件插件,该插件: 1.支持浏览器任意放缩,兼容移动端, 2.支持自动切换,鼠标经过停止切换,分页/任意页点击切换,左右切换, 3.支持文字介绍(超过一行自动省略) 本文讲述的是从开发一款基于Vue2x的响应式自适应轮播组件插件的一个全过程,包含发布到npm,构建自己的npm包,供下载安装使用的技巧,阅读本文需要些Vue的语法糖(自定义标签.计算属性.父子组件通信等),以及ES6.npm等基础知识.先来看下Demo 示例源码地址 Install

  • vue2实现可复用的轮播图carousel组件详解

    本文实例为大家分享了vue2实现轮播图carousel组件的使用方法,供大家参考,具体内容如下 1.千年老规矩,上效果图,说明功能: (1) 实现定时器,鼠标未移上图片时,自动轮播切换 (2) 有左右切换按钮,可切换至上一张.下一张 (3)有底部小图标,可自由切换至任意一张 github参考地址:https://github.com/chuanzaizai/vue_carousel 2.组件设计思路: (1)由于是可复用的子组件,图片的宽高.定时器间隔时间.轮播图list应由父组件传入 (2)定

  • VUE开发一个图片轮播的组件示例代码

    本人刚学习vue,用vue做了个图片轮播,下面我来记录一下,有需要了解VUE开发一个图片轮播的组件的朋友可参考.希望此文章对各位有所帮助. 完成效果图如下: vue开发的思路主要是数据绑定,代码如下: <template> <div ref="root" style="user-select: none;-webkit-user-select: none;overflow: hidden"> <div class="slide

  • Vue的轮播图组件实现方法

    今天在上慕课老师fishenal的vue实战课程的时候,有一个轮播图组件实现,在跟着做的时候,自己也踩了一些坑.此外,在原课程案例的基础上,我加入了不同方向的滑动功能. 本文章采用Vue结合Css3来实现轮播图. 首先要了解的是Vue的动画原理.在vue中,如果我们要给元素设置动画效果,则需要使用一个<transition name="targetClassName"></transition>将相应的元素包裹住,如下: <transition name=

  • vue移动端轻量级的轮播组件实现代码

    一个简单的移动端卡片滑动轮播组件,适用于Vue2.x c-swipe 2.0 全新归来.重写了全部的代码,更靠谱的质量,更优秀的性能 English Document 安装 npm install c-swipe --save 使用 注册组件 // main.js // 引入 c-swipe 主文件 import 'c-swipe/dist/swipe.css'; import { Swipe, SwipeItem } from 'c-swipe'; // 全局注册组件 Vue.componen

  • 使用Vue制作图片轮播组件思路详解

    之前一直都没有认真的写过一个组件.以前在写业务代码的过程中,都是用的别人封装好的组件,这次尝试着写了一个图片轮播组件,虽然比不上知名的轮播组件,但它的功能基本完整,而且在写这个组件的过程中,学的东西也很多,在这里也给大家分享出来,如有疏漏,欢迎指正! 在制作这个组件之前,笔者google了不少关于轮播的文章,发现实现一个轮播的思路虽然各有不同,但是大的逻辑其实差不多,本文主要依据慕课网上焦点轮播图特效这节课,不过慕课网主要用原生JS写,而笔者则用Vue进行了重构,并且进行了一点修改.完成后的组件

  • vue轮播组件实现$children和$parent 附带好用的gif录制工具

    1.先提前预祝大家国庆节玩的愉快,我国庆要见家长去了(忐忑) 2.忍不住想要为小米正名,虽然我是米粉但是我是理智粉. 24号不是mix alpha发布会啊,看了真滴是惊艳(现场直接有人喊" 牛逼 ",看过好多发布会,就没有看到这样直接喊出来"牛逼"的).不知道大家还记不记得13年那会吹苹果的时候的一块ppt手机(其实是媒体做的图),但是现在小米做出来了,甚至更好.但是我最近在uc上面那真是到处黑.以前我不相信水军说法,现在信了.如果关注小米mix alpha新闻的在

  • 利用Vue实现移动端图片轮播组件的方法实例

    前言 轮播图的插件也有很多,用jQuery写起来也不难,这里分享的是关于利用Vue实现移动端图片轮播组件的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍: wc-swiper 基于 Vue 的移动端的图片轮播组件. Why 之前一直在用 vue-awesome-swiper, 功能很齐全, 但是唯一的问题就是体积比较大. 我只是想要一个简单的图片轮播, 但是却要引入 100多k 大小的文件, 这样是不对的. 特点 支持自动播放 & 无限轮播 (loop) 效果 支持用户滑

  • 解决vue使用vant轮播组件swipe + flex时文字抖动问题

    原抖动效果 改后效果 解决方法 在外层容器的css里加上:transform: translateZ(0); 部分页面代码 <van-swipe-item v-for="(item,index) in meetingList" :key="index"> <div class="d-meet-top"> <div> <van-icon name="clock" class="

  • vue添加vue-awesome-swiper轮播组件方式

    目录 添加vue-awesome-swiper轮播组件 vue-awesome-swiper不轮播问题 添加vue-awesome-swiper轮播组件 1.vue项目中添加swiper组件,也是很常见的,通常在jQuery中的方法,其实并不适用于vue项目.vue由于自身的框架性问题不依赖于jQuery,所以vue最好是用自己本身的swiper内置标签 2.进入项目目录,安装swiper npm install vue-awesome-swiper --save 3.在main.js中定义该s

  • 使用JSX实现Carousel轮播组件的方法(前端组件化)

    在我们用 JSX 建立组件系统之前,我们先来用一个例子学习一下组件的实现原理和逻辑.这里我们就用一个轮播图的组件作为例子进行学习.轮播图的英文叫做 Carousel,它有一个旋转木马的意思. 上一篇文章<使用 JSX 建立 Markup 组件风格>中我们实现的代码,其实还不能称为一个组件系统,顶多是可以充当 DOM 的一个简单封装,让我们有能力定制 DOM. 要做这个轮播图的组件,我们应该先从一个最简单的 DOM 操作入手.使用 DOM 操作把整个轮播图的功能先实现出来,然后在一步一步去考虑怎

  • vue轮播图插件vue-concise-slider的使用

    vue-concise-slider vue-concise-slider,一个简单的滑动组件,配置简单,支持自适应/全屏+按钮+分页,同时兼容移动端和PC端 版本 v2.4.7支持vue2.0+ 特点 简单配置 轻量 (~24kB gzipped) 多种滑动样式 目前已实现 全屏自适应 移动端兼容 垂直滚动 定时自动切换 不定宽度滚动 无缝循环滚动 多级滚动 渐变滚动 旋转滚动 page中加入自定义组件 未来将实现 渐变滚动 视差效果 链接 文档 demo 安装 npm install vue

随机推荐