• 

      <ul id="0c1fb"></ul>
      

      <noscript id="0c1fb"><video id="0c1fb"></video></noscript>
      <noscript id="0c1fb"><listing id="0c1fb"><thead id="0c1fb"></thead></listing></noscript>
      

      99热在线精品一区二区三区_国产伦精品一区二区三区女破破_亚洲一区二区三区无码_精品国产欧美日韩另类一区
      


      
    
      
        
      
            
        
      
        
        
       
      
    
      

      


      
    

      

      
    
      
        
      RELATEED CONSULTING
      
        
      相關(guān)咨詢
      
    
      
    
      
        
      選擇下列產(chǎn)品馬上在線溝通
      
        
        
      服務(wù)時(shí)間：8:30-17:00
      
    
      
    
      
        
      你可能遇到了下面的問題
      
        
    
      
    
       關(guān)閉右側(cè)工具欄 
      

      



      
    
      
        
      
            
      
                
                
      
                    
      
                        
      
                            
      
                                
      新聞中心
      
                                
       這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案 
      
                            
      
                            
        
                                
      • 
                                
      • 
                                
      • 
                                
      • 
                                
      • 
                                
      • 
                                
      • 
                                
      • 
                                
      • 
                                
      • 
                            
      
                        
      
                    
      
                
      
                
                
      
                    
      
                        
      
                            
      
                                
      
                                    
      
                                        
      
                                            
      
                                                
      Vue.js移動(dòng)端組件庫(kù)atom-design中手勢(shì)組件怎么用
      
                                            
      
                                            
      
                                                
            
      這篇文章將為大家詳細(xì)講解有關(guān)Vue.js移動(dòng)端組件庫(kù)atom-design中手勢(shì)組件怎么用，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。
      創(chuàng)新互聯(lián)建站堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的徐水網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！
      介紹
      atom-design經(jīng)過(guò)幾個(gè)月的開發(fā)，以及這段時(shí)間的修復(fù)bug，對(duì)js,css壓縮，按需引入處理等等的性能優(yōu)化,現(xiàn)在已經(jīng)逐漸完善.做這套UI考慮到很多性能的問題，以及如何讓開發(fā)者更自由、更簡(jiǎn)單的去使用。這篇文章主要講使用Gesture(手勢(shì))相關(guān)組件的感受。
      Gesture(手勢(shì))相關(guān)組件
      ?Carousel(傳送帶)
      ?SlideItem (滑動(dòng)條)
      ?Range (區(qū)域選擇)
      ?Pull Gesture (上下拉動(dòng)手勢(shì))
      Carousel(傳送帶)
      import {Carousel} from 'atom-design';
Vue.component(Carousel.name, Carousel);

 item1
      
 item2
      
 item3
      

      使用Carousel來(lái)實(shí)現(xiàn)輪播圖，每個(gè)一級(jí)子節(jié)點(diǎn)都會(huì)當(dāng)成一個(gè)輪播滑塊
      效果如圖：
      Vue.js移動(dòng)端組件庫(kù)atom-design中手勢(shì)組件怎么用
       也可以在配置Carousel
      pagination(Boolean)：是否有分頁(yè)
auto(Boolean)：是否自動(dòng)輪播
loop(Boolean)：是否循環(huán)
time(Number)：間隔多久輪播（auto為true時(shí)生效）
v-model(Number): 綁定輪播的序號(hào)（從0開始）,也可以設(shè)置v-model的初始值來(lái)設(shè)置輪播從設(shè)置的序號(hào)開始輪播

 item1
      
 item2
      
 item3
      

      你會(huì)發(fā)現(xiàn)使用非常簡(jiǎn)單，而且輪播內(nèi)容完全可以自己定制，不限制是圖片，也可以是任何自定義DOM
      SlideItem (滑動(dòng)條)
      這是通過(guò)滑動(dòng)來(lái)顯示操作的組件
      import {SlideItem} from 'atom-design';
Vue.component(SlideItem .name, SlideItem);

 
  編輯
      
  刪除
      
 
      
 左右拖拽
      
 
  查看
      
 
      

      效果如下圖所示
       Vue.js移動(dòng)端組件庫(kù)atom-design中手勢(shì)組件怎么用
      只需要通過(guò)slot來(lái)指定左右的操作菜單（可選值leftAction/rightAction），便能直接使用滑動(dòng)功能. 如果你只需要左邊或者右邊的滑動(dòng)菜單，則只設(shè)置一邊即可，組件內(nèi)部會(huì)自動(dòng)限制另一邊的滑動(dòng)。內(nèi)容無(wú)需通過(guò)slot命名，默認(rèn)的未命名的插槽名都作為內(nèi)容。
      v-model綁定slideItem組件開關(guān)，v-model指為false時(shí)，則slideItem會(huì)自動(dòng)過(guò)渡到未滑動(dòng)時(shí)的狀態(tài)
      Range（區(qū)域選擇）
      import {Range} from 'atom-design';
Vue.component(Range.name, Range);

      效果如下所示：
       Vue.js移動(dòng)端組件庫(kù)atom-design中手勢(shì)組件怎么用
      v-model綁定滑動(dòng)選擇的數(shù)值，color可以自定義主題顏色
      Pull Gesture （上拉下拉手勢(shì)）
      此組件一般用來(lái)下拉來(lái)更新數(shù)據(jù)也可以通過(guò)上拉來(lái)做一些加載數(shù)據(jù)或者更新的操作
      效果如下圖所示：
       Vue.js移動(dòng)端組件庫(kù)atom-design中手勢(shì)組件怎么用
      支持全局引入和按需引入
      全局引入
      import atomD from 'atom-design';
import 'atom-design/bundle/style.css';
Vue.use(atomD);
      全局引入atom-design的js和css會(huì)全部引入到項(xiàng)目中，因此盡量選擇按需引入
      按需引入
      按需引入步驟
      使用 babel-plugin-component 插件來(lái)實(shí)現(xiàn)按需引入
      (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) => {
    // 選中的數(shù)據(jù)
    console.log(res)
   }
  }
 })
      // 使用兩個(gè)組件，按需引入后打包完的css也只有3kb
      Vue.js移動(dòng)端組件庫(kù)atom-design中手勢(shì)組件怎么用
      // 打包后的js也只有使用到的組件才會(huì)打包進(jìn)去
      Vue.js移動(dòng)端組件庫(kù)atom-design中手勢(shì)組件怎么用
      非常感謝您能夠看到這里，這套UI現(xiàn)在已經(jīng)趨于完善，你可以在生產(chǎn)項(xiàng)目中試著使用，如果有碰到問題可以在以下github地址提issue, 我們會(huì)盡最快的時(shí)間去解決。
      關(guān)于“Vue.js移動(dòng)端組件庫(kù)atom-design中手勢(shì)組件怎么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。
                  
            
                                                            
      
                                                本文標(biāo)題：Vue.js移動(dòng)端組件庫(kù)atom-design中手勢(shì)組件怎么用                                                
      
                                                標(biāo)題來(lái)源：http://www.ef60e0e.cn/article/jgepjo.html
                                            
                                            
      
                                                
      
                                                    
      其他資訊
      
                                                
      
                                                
      
                                                    
                                                
      
                                            
      
                                        
                                    
                                
                            
                        
                    
                
            
        
    





99热在线精品一区二区三区_国产伦精品一区二区三区女破破_亚洲一区二区三区无码_精品国产欧美日韩另类一区 

    3. 

        <ul id="0c1fb"></ul>
        

        <noscript id="0c1fb"><video id="0c1fb"></video></noscript>
        <noscript id="0c1fb"><listing id="0c1fb"><thead id="0c1fb"></thead></listing></noscript>
        
金川县|
揭东县|
繁昌县|
蓝山县|
库尔勒市|
福贡县|
望城县|
嵊泗县|
凤山县|
米林县|
马龙县|
徐州市|
玉门市|
巩义市|
姜堰市|
会宁县|
安泽县|
花莲县|
冷水江市|
红河县|
罗源县|
那曲县|
女性|
荆门市|
衡南县|
谢通门县|
当雄县|
琼海市|
三亚市|
孝昌县|
庐江县|
浠水县|
南投县|
葵青区|
陵川县|
板桥市|
从化市|
冕宁县|
酉阳|
盐池县|
岳池县|