构建Vue.js组件:slider

zxhaaa 发布于2019-08-26 11:29 / 3197人阅读

摘要：组件的使用场景很多，主要为图片的展示。一个主要由顶层容器和每一帧的组成。更多关于由于支持多个可用户自定义的，所以需要在中声明这些支持的自定义属性，以便在组件声明时使用上一帧下一帧导航自动播放播放效果导航位置滑动特效组件支持两种特效和。

Slider组件的使用场景很多，主要为图片的展示。一个slider主要由顶层容器和每一"帧"的slide组成。下面通过一个例子尝试基于Vue.js去构建一个Slider组件，支持以下功能：

上一帧／下一帧导航

自动播放

播放效果(slide/fade)

无限循环

Dot

Dot hover 导航

Slider 顶层容器

标签处便是每一帧的slide，可在子组件中使用v-for结合一个储存图片地址的数组遍历输出。更多关于slot

api

由于slider 支持多个可用户自定义的api，所以需要在props中声明这些支持的自定义属性，以便在组件声明时使用：

// ...
props: {
  // 上一帧／下一帧 导航
  control: {
    type: Boolean,
    default: true
  },
  // 自动播放
  auto: {
    type: Boolean,
    default: false
  },
  // 播放效果(slide/fade)
  effect: {
    type: String,
    default: "fade"
  },
  // dot
  dot: {
    type: Boolean,
    default: true
  },
  // Dot hover 导航
  dotHover: {
    type: Boolean,
    default: true
  },
  // Dot 位置(left | center | right)
  dotFloat: {
    type: String,
    default: "center"
  }
},
// ...

滑动特效

slider 组件支持两种特效：slide和fade。

slide特效的每一次滑动都改变slider的right值，结合CSS3的transition来实现滑动。

fade特效为改变当前帧的opacity趋向0，目标帧的opacity趋向1，通过一个定时器setTimeout控制，从而实现渐隐渐现的效果。这时需考虑自动播放为true时手动去点击上一帧／下一帧时需先清除这个定时器。

如何使用

import slider from "slider"
import slide from "slide"

然后...


  
     
       {{$index}}

当当当好了.

说了那么多(￣ー￣)，源码－> Link

idc机房托管云服务器 slider Vue.js vue.js 属性 vue.js自学

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

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

推荐给新手的35个好用的Vue开源库

摘要：无论是开发新手还是经验丰富的老手，我们都喜欢开源软件包。所幸的是，随着社区的不断壮大，每天都会出现一些很好的软件包。在下文中，我们将推荐一些非常好用的开源库是一个非常易用的渐进式框架，用于构建用户界面。的一个极简主义的深色设计系统。无论是开发新手还是经验丰富的老手，我们都喜欢开源软件包。对于开发者来说，如果没有这些开源软件包，很难想象我们的生活会变得多么疲惫不堪，而且靠咖啡度日也会成...

oliverhuang 2019-08-23 14:59 评论0 收藏0
vue-music（1）音乐播发器项目开发记录

摘要：在中新建组件许文瑞正在吃屎。。。。在中添加如下代码三歌手组件开发歌手首页开发数据获取数据获取依旧从音乐官网获取歌手接口创建我们和以前一样，利用我们封装的等发放，来请求我们的接口，返回给。 Vue-Music 跟学一个网课老师做的仿原生音乐APP跟学的笔记，记录点滴，也希望对学习vue初学小伙伴有点帮助 showImg(https://segmentfault.com/img/remot...

happen 2019-08-23 11:29 评论0 收藏0
vue.js 移动端音乐app（一）基础组件 scroll

一、基础实现（1）功能对 better-scroll 插件的基本封装，实现移动端的滚动（2）实现引入 better-scroll props probeType: better-scroll 配置项之一（1）取值： 1 滚动的时候会派发 scroll 事件，会截流。 2 滚动的时候实时派发 scroll 事件，不会截流。 3 除了实时派发 scroll 事件，在 swipe 的情况...

wqj97 2019-08-21 17:38 评论0 收藏0
vue.js 移动端音乐app（一）基础组件 scroll

一、基础实现（1）功能对 better-scroll 插件的基本封装，实现移动端的滚动（2）实现引入 better-scroll props probeType: better-scroll 配置项之一（1）取值： 1 滚动的时候会派发 scroll 事件，会截流。 2 滚动的时候实时派发 scroll 事件，不会截流。 3 除了实时派发 scroll 事件，在 swipe 的情况...

FingerLiu 2019-08-01 18:01 评论0 收藏0