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

介绍

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

效果如图:

也可以在配置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也只有3kb

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

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

github地址

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

中文文档

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

总结

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

(0)

相关推荐

  • vue-router 手势滑动触发返回功能

    vue-router的路由变换只存在"变换前"和"变换后",不存在"切换中"的状态,所以做不到大多数app(微信那样的)在滑动过程中让界面跟随手指移动.但滑动事件还是可以监听的,我们可以在滑动之后再触发路由回退事件. 微博的滑动返回基本上就是这样的原理:先滑动.再触发返回事件,但用起来很是怪异,有严重的滞后感.夸克浏览器做的就比较好:一是滑动时界面虽然不动,但是界面上有小图标提示,能让用户接受到反馈:二是返回过程很快,没有多余的过渡动画. app

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

    介绍 atom-design经过几个月的开发,以及这段时间的修复bug,对js,css压缩,按需引入处理等等的性能优化,现在已经逐渐完善.做这套UI考虑到很多性能的问题,以及如何让开发者更自由.更简单的去使用.这篇文章主要讲使用Gesture(手势)相关组件的感受. Gesture(手势)相关组件 •Carousel(传送带) •SlideItem (滑动条) •Range (区域选择) •Pull Gesture (上下拉动手势) Carousel(传送带) import {Carousel}

  • Vue.js移动端左滑删除组件的实现代码

    左滑删除在移动端很常见.下面我们一起来封装一下这个简单的小组件.我们想要是: 当滑块没有超过删除按钮的一半时自动回到起点位置. 滑动距离超过一半滑动到最大值(删除按钮宽度) 尽量精简代码 效果如下: 在开始之前,我们先得将 [touchEventApi][1]弄清楚了.这个小组件中,用到了: 1.  TouchEvent.touches (表示一 个 TouchList 对象,包含了所有当前接触触摸平面的触点的Touch对象) 2.  TouchEvent.changedTouches (一个

  • Mint UI 基于 Vue.js 移动端组件库

    官网地址 http://mint-ui.github.io/ Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.通过它,可以快速构建出风格统一的页面,提升开发效率. 真正意义上的按需加载组件.可以只加载声明过的组件及其样式文件,无需再纠结文件体积过大. 考虑到移动端的性能门槛,Mint UI 采用 CSS3 处理各种动效,避免浏览器进行不必要的重绘和重排,从而使用户获得流畅顺滑的体验. 依托 Vue.js 高效的组件化方案,Mint UI 做到了轻量化.即使全部引

  • vue实现移动端轻量日期组件不依赖第三方库的方法

    不需要依赖第三方组件的vue日期移动端组件  小轮子 轻量可复用:   https://github.com/BeckReed/datepicker-for-vue 2.用法:参见 src/view/demo.vue 文件的用法,简单易懂 <div> <h3>三列(年月日)日期弹窗示例--带标题)</h3> <button class="blue-btn" @click="togglePicker2">显示三列带标题日

  • Vue.js桌面端自定义滚动条组件之美化滚动条VScroll

    前言 前段时间有给大家分享一个vue桌面端弹框组件,今天再分享最近开发的一个vue pc端自定义滚动条组件. vscroll 一款基于vue2.x开发的网页端轻量级超小巧自定义美化滚动条组件.支持是否原生滚动条.鼠标移出是否自动隐藏.自定义滚动条尺寸及颜色等功能. 组件在设计开发之初借鉴了 el-scrollbar 及 vuebar 等组件设计思想. 通过简单的标签写法<v-scroll>...</v-scroll> 即可快速生成一个漂亮的替换原生滚动条. 参数配置 props:

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

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

  • 深入理解Vue.js轻量高效的前端组件化方案

    Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.在前端纷繁复杂的生态中,Vue.js有幸受到一定程度的关注,目前在GitHub上已经有5000+的star.本文将从各方面对Vue.js做一个深入的介绍. Vue.js 是我在2014年2月开源的一个前端开发库,通过简洁的 API 提供高效的数据绑定和灵活的组件系统.在前端纷繁复杂的生态中,Vue.js有幸受到一定程度的关注,目前在 GitHub上已经有5000+的star.本文将从各方面对Vue.js做一个深入的介绍. 开发初衷

  • Vue.extend实现组件库message组件示例详解

    目录 概述 Vue.extend message 组件配置对象(就是.vue文件) message 生成组件的函数 使用方法 效果图 总结 概述 当我们使用组件库的时候,某些组件并不是直接放到模板当中进行使用,而是通过api的方式调用生成组件并且挂在到我们的页面中,其中最常见的就是message组件,我们在组件库中看到的多数都是api调用的方式生成.记录自己基本实现message组件. Vue.extend 在vue中,要实现通过api方式实现组件的使用,这个aip是必不可少的,因此我们先了解下

  • 详解vue.js移动端配置flexible.js及注意事项

    前言 最近在用vue做移动端项目,网上找了一些移动端适配的方案,个人觉得手淘团队flexible.js还是比较容易上手,在这里做下总结. 主体 flexible.js适配方案采用rem布局,根据屏幕分辨率大小不同,调整根元素html的font-size,从而达到每个元素宽高自动变化,适配不同屏幕 1.安装lib-flexible.js npm install lib-flexible --save 1.在项目入口文件main.js中引入lib-flexible import 'lib-flexi

  • Vue.js实现可排序的表格组件功能示例

    本文实例讲述了Vue.js实现可排序的表格组件功能.分享给大家供大家参考,具体如下: 我们基于 Vue.js 实现一个可根据某列进行排序的表格组件. 一个表格包含表头和数据两部分内容.因此,我们定义两个数组,columns 表示表头信息,在 <thread> 中渲染,并可在此指定某一列是否需要排序:data 表示数据. html: <div id="app" v-cloak> <v-table :data="data" :columns

随机推荐