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

2019-05-16 admin

介绍

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

github地址

https://github.com/Reming9602… (可以点个star谢谢,给我们一点动力)

中文文档

https://atom-design.github.io…

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, 我们会尽最快的时间去解决您遇到的问题。

[转载]原文链接:https://segmentfault.com/a/1190000019201984

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-65129.html

文章标题:atom-design(Vue.js移动端组件库)手势组件介绍

相关文章
为什么要选择Nodejs?Nodejs有什么好处?
什么?JavaScript还能用作服务器编程! Caleb Madrigal是来自美国密尔沃基市的一名软件顾问。四年前,他在听说“将JavaScript用作服务器端语言”这样的说法时,认为那是一个荒唐的想法。有那么多服务器端语言可供选择,为...
2015-11-12
js性能优化 如何更快速加载你的JavaScript页面
确保代码尽量简洁 不要什么都依赖JavaScript。不要编写重复性的脚本。要把JavaScript当作糖果工具,只是起到美化作用。别给你的网站添加大量的JavaScript代码。只有必要的时候用一下。只有确实能改善用户体验的时候用一下。 ...
2015-11-12
2015年JavaScript或“亲库而远框架”
2014年过去了,作为一个JavaScript开发者很难满怀信心的去“挽回”一个特定的库或技术,即便是强大的Angular,似乎也因为最近的一些事情而动摇。 2014年10月的ng-europe会议上,Angular开发者团队透露了一个关于...
2015-11-12
Node.js 2014这一年发生了什么
Node.js 的 2014 年充满了不幸和争议. 这一年 Noder 们经历了太多的伤心事, 经历了漫长的等待, 经历了沉重的分裂之痛. 也许 Noder 们不想回忆14年 Node.js land 发生的事情, 但正因为痛才更有铭记的价...
2015-11-12
JavaScript实现PC手机端和嵌入式滑动拼图验证码三种效果
PC和手机端网站滑动拼图验证码效果源码,同时包涵了弹出式Demo,使用ajax形式提交二次验证码所需的验证结果值,嵌入式Demo,使用表单形式提交二次验证所需的验证结果值,移动端手动实现弹出式Demo三种效果 首先要确认前端使用页面,比如...
2017-03-17
Vue获取DOM元素样式和样式更改示例
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 ‘style’ is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: &lt;template...
2017-03-13
React.js编程思想
JavaScript框架层出不穷,在很多程序员看来,React.js是创建大型、快速的Web应用的最好方式。这一款由Facebook出品的JS框架,无论是在Facebook还是在Instagram中,它的表现都非常出色。 使用React.j...
2015-11-12
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; ...
2017-03-13
从2014年的发展来展望JS的未来将会如何
&lt;font face=&quot;寰�杞�闆呴粦, Arial, sans-serif &quot;&gt;2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个 痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简...
2018-05-24
回到顶部