atom-design(Vue.js移动端组件库)手势组件使用教程


Posted in Javascript onMay 16, 2019

介绍

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

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来实现轮播图,每个一级子节点都会当成一个轮播滑块

效果如图:

atom-design(Vue.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>

效果如下图所示

 atom-design(Vue.js移动端组件库)手势组件使用教程

只需要通过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>

效果如下所示:

 atom-design(Vue.js移动端组件库)手势组件使用教程

v-model绑定滑动选择的数值,color可以自定义主题颜色

Pull Gesture (上拉下拉手势)

此组件一般用来下拉来更新数据也可以通过上拉来做一些加载数据或者更新的操作

效果如下图所示:

 atom-design(Vue.js移动端组件库)手势组件使用教程

支持全局引入和按需引入

全局引入

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也只有3kb

atom-design(Vue.js移动端组件库)手势组件使用教程

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

atom-design(Vue.js移动端组件库)手势组件使用教程

非常感谢您能够看到这里,这套UI现在已经趋于完善,你可以在生产项目中试着使用,如果有碰到问题可以在以下github地址提issue, 我们会尽最快的时间去解决。

github地址

https://github.com/Reming9602...

中文文档

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

总结

以上所述是小编给大家介绍的atom-design(Vue.js移动端组件库)手势组件使用教程,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
悄悄用脚本检查你访问过哪些网站的代码
Dec 04 Javascript
CSS鼠标响应事件经过、移动、点击示例介绍
Sep 04 Javascript
javascript unicode与GBK2312(中文)编码转换方法
Nov 14 Javascript
javascript 数组排序函数sort和reverse使用介绍
Nov 21 Javascript
Vue和Bootstrap的整合思路详解
Jun 30 Javascript
Node之简单的前后端交互(实例讲解)
Nov 14 Javascript
javascript中floor使用方法总结
Feb 02 Javascript
Vue侦测相关api的实现方法
May 22 Javascript
详解基于 Node.js 的轻量级云函数功能实现
Jul 08 Javascript
微信小程序本地存储实现每日签到、连续签到功能
Oct 09 Javascript
小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
Apr 15 Javascript
JS实现4位随机验证码
Oct 19 Javascript
小程序scroll-view安卓机隐藏横向滚动条的实现详解
May 16 #Javascript
微信小程序云开发之云函数详解
May 16 #Javascript
微信小程序云开发之模拟后台增删改查
May 16 #Javascript
微信小程序云开发之新手环境配置
May 16 #Javascript
vue项目中使用scss的方法步骤
May 16 #Javascript
微信小程序云开发使用方法新手初体验
May 16 #Javascript
angular多语言配置详解
May 16 #Javascript
You might like
php页面跳转session cookie丢失导致不能登录等问题的解决方法
2016/12/12 PHP
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
php实现的rc4加密解密类定义与用法示例
2018/08/16 PHP
javascript import css实例代码
2008/07/18 Javascript
jQuery中获取checkbox选中项等操作及注意事项
2013/11/24 Javascript
javascript操纵OGNL标签示例代码
2014/06/16 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
2017/05/18 Javascript
Angular2里获取(input file)上传文件的内容的方法
2017/09/05 Javascript
解决vue 路由变化页面数据不刷新的问题
2018/03/13 Javascript
vue 之 .sync 修饰符示例详解
2018/04/21 Javascript
浅析Vue 生命周期
2018/06/21 Javascript
js尾调用优化的实现
2019/05/23 Javascript
vue 组件简介
2020/07/31 Javascript
VUE 实现element upload上传图片到阿里云
2020/08/12 Javascript
Python压缩解压缩zip文件及破解zip文件密码的方法
2015/11/04 Python
python批量添加zabbix Screens的两个脚本分享
2017/01/16 Python
详解python string类型 bytes类型 bytearray类型
2017/12/16 Python
python中文乱码不着急,先看懂字节和字符
2017/12/20 Python
Python实现PS滤镜的旋转模糊功能示例
2018/01/20 Python
win7 x64系统中安装Scrapy的方法
2018/11/18 Python
详解Python3 pickle模块用法
2019/09/16 Python
Python的对象传递与Copy函数使用详解
2019/12/26 Python
Python 识别12306图片验证码物品的实现示例
2020/01/20 Python
打印tensorflow恢复模型中所有变量与操作节点方式
2020/05/26 Python
Keras之自定义损失(loss)函数用法说明
2020/06/10 Python
使用python matploblib库绘制准确率,损失率折线图
2020/06/16 Python
使用html5 canvas创建太空游戏的示例
2014/05/08 HTML / CSS
美国殿堂级滑板、冲浪、滑雪服装品牌:Volcom(钻石)
2017/04/20 全球购物
英国打印机墨水和碳粉商店:Printerinks
2017/06/30 全球购物
马德里运动鞋商店:Nigra Mercato
2020/02/16 全球购物
公务员政审单位鉴定材料
2014/05/16 职场文书
广告宣传策划方案
2014/05/21 职场文书
土地租赁协议书
2015/01/29 职场文书
2015中秋节晚会开场白
2015/07/30 职场文书
2016幼儿园教师节新闻稿
2015/11/25 职场文书
德劲DE1108畅想
2021/04/22 无线电