atom-design(Vue.js移動端組件庫)手勢組件使用教程

2019-11-19 11:32:42

字體：大中小

來源：轉載

供稿：網友

介紹

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