Vue.js移动端组件库atom-design中手势组件怎么用-创新互联-乐山大橙子建站

新闻中心

这里有您想知道的互联网营销解决方案

Vue.js移动端组件库atom-design中手势组件怎么用-创新互联

这篇文章将为大家详细讲解有关Vue.js移动端组件库atom-design中手势组件怎么用，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

成都创新互联始终坚持【策划先行，效果至上】的经营理念，通过多达十多年累计超上千家客户的网站建设总结了一套系统有效的推广解决方案，现已广泛运用于各行各业的客户，其中包括：发电机维修等企业，备受客户称扬。

介绍

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

Gesture(手势)相关组件

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

Carousel(传送带)

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

 item1

item2

item3

使用Carousel来实现轮播图，每个一级子节点都会当成一个轮播滑块

效果如图：

Vue.js移动端组件库atom-design中手势组件怎么用

也可以在配置Carousel

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

 item1

item2

item3

你会发现使用非常简单，而且轮播内容完全可以自己定制，不限制是图片，也可以是任何自定义DOM

SlideItem (滑动条)

这是通过滑动来显示操作的组件

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

 
  编辑

删除

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) } } })

新闻中心

其他资讯