atom-design(Vue.js移动端组件库)手势组件介绍

介绍

atom-design通过几个月的开发，以及这段时间的修复bug，对js,css压缩，按需引入处理等等的性能优化,如今已经逐渐完善.作这套UI考虑到不少性能的问题，以及如何让开发者更自由、更简单的去使用。您能够试着在生产环境中使用，这篇文章主要讲使用Gesture(手势)相关组件的介绍和使用感觉。

github地址

github.com/reming0227/… (能够点个star谢谢，给咱们一点动力)

中文文档

atom-design.github.io/docs/#/

Gesture(手势)相关组件

• Carousel(传送带)
• SlideItem (滑动条)
• Range (区域选择)
• Pull Gesture (上下拉动手势)

Carousel(传送带)

import {Carousel} from 'atom-design';
Vue.component(Carousel.name, Carousel);
复制代码

<carousel>
  <div class="carousel-item item1">item1</div>
  <div class="carousel-item item2">item2</div>
  <div class="carousel-item item3">item3</div>
</carousel>
复制代码

使用Carousel来实现轮播图，每一个一级子节点都会当成一个轮播滑块.传送带组件参考比较流行的swiper来设计，swiper.js是经过自定义的复制副本个数，在头尾各自添加头部副本和尾部副本，滑动至最后一个和首个滑块的时候判断手势方向translate来切换到副本位置. 实现原理以下图：

（swiper.js也是按此来实现的）

效果如图：

也能够在配置Carousel
pagination(Boolean)：是否有分页
auto(Boolean)：是否自动轮播
loop(Boolean)：是否循环
time(Number)：间隔多久轮播（auto为true时生效）
v-model(Number): 绑定轮播的序号（从0开始）,也能够设置v-model的初始值来设置轮播从设置的序号开始轮播
复制代码

<carousel :pagination="true" :auto="true" :loop="true" :time="5000" v-model="slideIdx">
  <div class="carousel-item item1">item1</div>
  <div class="carousel-item item2">item2</div>
  <div class="carousel-item item3">item3</div>
</carousel>
复制代码

你会发现使用很是简单，并且轮播内容彻底能够本身定制，不限制是图片，也能够是任何自定义DOM

SlideItem (滑动条)

这是经过滑动来显示操做的组件

import {SlideItem} from 'atom-design';
Vue.component(SlideItem .name, SlideItem);
复制代码

<atom-slide v-model="isClose">
  <div class="slide-action" slot="rightAction">
    <div class="action edit" @click="show">编辑</div>
    <div class="action delete" @click="show">删除</div>
  </div>
  <div class="slide-demo">左右拖拽</div>
  <div class="slide-action" slot="leftAction">
    <div class="action info" @click="show">查看</div>
  </div>
</atom-slide>
复制代码

效果以下图所示

只须要经过slot来指定左右的操做菜单（可选值leftAction/rightAction），便能直接使用滑动功能. 若是你只须要左边或者右边的滑动菜单，则只设置一边便可，组件内部会自动限制另外一边的滑动。内容无需经过slot命名，默认的未命名的插槽名都做为内容。

v-model绑定slideItem组件开关，v-model指为false时，则slideItem会自动过渡到未滑动时的状态
复制代码

Range（区域选择）

import {Range} from 'atom-design';
Vue.component(Range.name, Range);
复制代码

<atom-range v-model="range2" color="#dd2622"></atom-range>
复制代码

效果以下所示：

v-model绑定滑动选择的数值，color能够自定义主题颜色

Pull Gesture （上拉下拉手势）

此组件通常用来下拉来更新数据也能够经过上拉来作一些加载数据或者更新的操做 效果以下图所示：

支持全局引入和按需引入

全局引入

import atomD from 'atom-design';
import 'atom-design/bundle/style.css';
Vue.use(atomD);
复制代码

全局引入atom-design的js和css会所有引入到项目中，所以尽可能选择按需引入

按需引入

按需引入步骤 使用 babel-plugin-component 插件来实现按需引入

(1)先安装babel-plugin-component
npm install babel-plugin-component --save-dev
(2)配置.babelrc
[
 "plugins": [
    ["component", {
      "libraryName": "atom-design",
      "style": true
    }]
  ]
]
(3)引入所需组件
import {Picker, Button} from 'atom-design';
Vue.component(Button.name, Button);
const monthArr = [{
  text: 1
},
{
  text: 2
},
{
  text: 3
}]
Picker({
    data: [{
      text: 1996,
      childrens: monthArr
    },
    {
      text: 1997,
      childrens: monthArr
    },
    {
      text: 1998,
      childrens: monthArr
    },
    {
      text: 1999,
      childrens: monthArr
    },
    {
      text: 2000,
      childrens: monthArr
    }],
    submitBtn: {
      style: '',
      event: (res) => {
        // 选中的数据
        console.log(res)
      }
    }
  })
复制代码

// 按需引入后打包完的css也只有使用到的css才会打包进入，几个组件仅仅只有3kb

// 按需引入后打包后的js也只有使用到的组件才会打包进去

很是感谢您可以看到这里，这套UI如今已经趋于完善，你能够在生产环境中试着使用，若是有碰到问题能够在github地址提issue, 咱们会尽最快的时间去解决您遇到的问题。