介紹

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, 我們會盡最快的時間去解決您遇到的問題。

轉載于:https://juejin.im/post/5cdcf75ef265da03587c2397

總結

以上是生活随笔為你收集整理的atom-design(Vue.js移动端组件库)手势组件介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。