atom-design(Vue.js移動端組件庫)手勢組件介紹

介紹

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