成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

WeUI基礎(chǔ)樣式庫(kù)——寫一個(gè)移動(dòng)端界面

meteor199 / 2735人閱讀

摘要：是一套基礎(chǔ)樣式庫(kù)，同微信原生視覺體驗(yàn)一致，由微信官方設(shè)計(jì)團(tuán)隊(duì)為微信內(nèi)網(wǎng)頁(yè)和微信小程序量身設(shè)計(jì)的。為了更好的說(shuō)明這個(gè)基礎(chǔ)樣式庫(kù)的使用，接下來(lái)我將介紹兩個(gè)例子。

WeUI是一套基礎(chǔ)樣式庫(kù)，同微信原生視覺體驗(yàn)一致，由微信官方設(shè)計(jì)團(tuán)隊(duì)為微信內(nèi)網(wǎng)頁(yè)和微信小程序量身設(shè)計(jì)的。
我們來(lái)看看這個(gè)基礎(chǔ)庫(kù)樣式到底長(zhǎng)什么樣。

這些密密麻麻的就是壓縮后的樣式庫(kù)。密密麻麻地看起來(lái)簡(jiǎn)直要急死密集恐懼癥啊。不要急，您請(qǐng)往下看。
仔細(xì)看我們能看到，這個(gè)樣式庫(kù)為很多類寫了樣式。也就是說(shuō)，我們只要在html頁(yè)面中使用這些樣式，就能構(gòu)建一個(gè)頁(yè)面了?！局灰獙戭惷?，省去了為很多標(biāo)簽定義樣式，是不是省事多了呢?】
對(duì)WeUI的介紹就到這了，下面都是滿滿的干貨啦。

開始寫頁(yè)面前的準(zhǔn)備

要想有這個(gè)樣式庫(kù)，當(dāng)然要先下載WeUI的樣式庫(kù)啦，我提供了兩個(gè)下載的地址。

一個(gè)是騰訊的GitHub下載地址：https://github.com/weui/weui

另一個(gè)是我放在GitHub上的weui.min.css樣式：https://raw.githubusercontent...

接下來(lái)就為我們的頁(yè)面引入這個(gè)基礎(chǔ)樣式庫(kù)。
我把這個(gè)基礎(chǔ)樣式庫(kù)放在本地了，就這么引入。

為了更好的說(shuō)明這個(gè)基礎(chǔ)樣式庫(kù)的使用，接下來(lái)我將介紹兩個(gè)例子。單頁(yè)應(yīng)用頁(yè)面和彈出框。

單頁(yè)應(yīng)用頁(yè)面

我們致敬vue，模仿這個(gè)頁(yè)面。
縱觀整個(gè)頁(yè)面，可以分為以下幾個(gè)模塊。

最頂上放置logo

中間有兩個(gè)cells 也就是單元格，來(lái)顯示數(shù)據(jù)

最底部有一個(gè)tabbar導(dǎo)航條

引入代碼：


    

    

    

    

    

    

    
current vue version 2.5.2

頂部的圖片插入比較簡(jiǎn)單，直接引入圖片就行。我們說(shuō)說(shuō)中間cells中內(nèi)容的添加。
我們看一個(gè)單元格，很典型的左中右格式，分為三個(gè)結(jié)構(gòu)層次，

左邊是一張圖片，WeUI樣式庫(kù)為我們定義了類名，也就是單元格的頭部：weui-cell__hd

中間是一段文字，也就是這個(gè)單元格的身體：weui-cell__bd

最右邊是一個(gè)小箭頭，也就是單元格的尾部：weui-cell__ft

引入代碼：

這樣，我們就寫完了一個(gè)單元格。
第二個(gè)單元格有兩個(gè)小格怎么辦呢？
不要緊，weui-cell是單元格中的一個(gè)小格子，有多少個(gè)小格子就嵌套在一個(gè)weui-cells中就可以了，每一格weui-cell還是按照上面的左中右方式進(jìn)行命名：

接下來(lái)是最底部的tabbar。
最尾部的導(dǎo)航條類名為weui-tabbar，里面有三項(xiàng)內(nèi)容，也就是有三個(gè)weui-tabbar__item。

為每一個(gè)weui-tabbar__item添加內(nèi)容吧：

我放在GitHub上的項(xiàng)目地址：https://github.com/TeanLee/qs...
這就完成了第一個(gè)單頁(yè)頁(yè)面的編寫。


接下來(lái)我們說(shuō)說(shuō)一個(gè)彈出框。

頁(yè)面彈出框

放上我們要寫的頁(yè)面成品圖：

這就是我們平常很常見的彈出框了。這里是點(diǎn)擊了第一個(gè)按鈕就彈出這個(gè)彈框，點(diǎn)擊取消，彈框消失，當(dāng)然你也可以添加別的事件，點(diǎn)擊取消和保存都會(huì)讓彈框消失并且執(zhí)行相應(yīng)的步驟。


首先，我們?yōu)閐ialog彈出框制作一個(gè)“家”，也就是dialog放置的頁(yè)面：
weui-btn 是weui的基本組件是一個(gè)按鈕


  

    
Dialog

    
對(duì)話框

  

  

    
    IOS Dialog樣式 default
    IOS Dialog樣式 primary
    IOS Dialog樣式 warn

接下來(lái)，我們的dialog就要登場(chǎng)了。直接把dialog的div放在放置按鈕div的后面。

這里的遮罩層是為整個(gè)頁(yè)面蒙上一層灰色的背景，把用戶的吸引力引到彈框上。
彈框的內(nèi)容還是分為三個(gè)層次：

weui-dialog__hd：彈框的頭部寫標(biāo)題；

weui-dialog__bd：彈框的身體寫具體內(nèi)容；

weui-dialog__ft：彈框的尾部放置按鈕；

接下來(lái)，就是給第一個(gè)按鈕添加綁定事件了，點(diǎn)擊第一個(gè)按鈕就跳出來(lái)彈框。



我放在GitHub上的彈框具體代碼：https://github.com/TeanLee/qs...


當(dāng)然，weu基礎(chǔ)樣式庫(kù)還有很多很多組件可以使用，可以進(jìn)入https://weui.io/  查看更多的基礎(chǔ)組件。
接下來(lái)讓我們一起學(xué)習(xí)更多吧！
           
               
                                           
                       
                 

            
                     
             
               

                   
 文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

                 
                   
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/51517.html

               

                      
               
              

              

                
相關(guān)文章

                
    
                             
                                                                    
  • 
                                                
    
                          
    WeUI基礎(chǔ)樣式庫(kù)——寫一個(gè)移動(dòng)端界面
    
                                                     
    摘要：是一套基礎(chǔ)樣式庫(kù)，同微信原生視覺體驗(yàn)一致，由微信官方設(shè)計(jì)團(tuán)隊(duì)為微信內(nèi)網(wǎng)頁(yè)和微信小程序量身設(shè)計(jì)的。為了更好的說(shuō)明這個(gè)基礎(chǔ)樣式庫(kù)的使用，接下來(lái)我將介紹兩個(gè)例子。

WeUI是一套基礎(chǔ)樣式庫(kù)，同微信原生視覺體驗(yàn)一致，由微信官方設(shè)計(jì)團(tuán)隊(duì)為微信內(nèi)網(wǎng)頁(yè)和微信小程序量身設(shè)計(jì)的。我們來(lái)看看這個(gè)基礎(chǔ)庫(kù)樣式到底長(zhǎng)什么樣。showImg(https://segmentfault.com/img/bVYCKd?...
    
                                                   
                          
    
                                
    
                                    hedge_hog
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                                                       
  • 
                                                
    
                          
    WeUI基礎(chǔ)樣式庫(kù)——寫一個(gè)移動(dòng)端界面
    
                                                     
    摘要：是一套基礎(chǔ)樣式庫(kù)，同微信原生視覺體驗(yàn)一致，由微信官方設(shè)計(jì)團(tuán)隊(duì)為微信內(nèi)網(wǎng)頁(yè)和微信小程序量身設(shè)計(jì)的。為了更好的說(shuō)明這個(gè)基礎(chǔ)樣式庫(kù)的使用，接下來(lái)我將介紹兩個(gè)例子。

WeUI是一套基礎(chǔ)樣式庫(kù)，同微信原生視覺體驗(yàn)一致，由微信官方設(shè)計(jì)團(tuán)隊(duì)為微信內(nèi)網(wǎng)頁(yè)和微信小程序量身設(shè)計(jì)的。我們來(lái)看看這個(gè)基礎(chǔ)庫(kù)樣式到底長(zhǎng)什么樣。showImg(https://segmentfault.com/img/bVYCKd?...
    
                                                   
                          
    
                                
    
                                    xiyang
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    UI大全：前端UI框架集合（持續(xù)更新，當(dāng)前32個(gè)）
    
                                                     
    摘要：簡(jiǎn)潔直觀強(qiáng)悍的前端開發(fā)框架，讓開發(fā)更迅速簡(jiǎn)單。是一套基于的前端框架。首個(gè)版本發(fā)布于年金秋，她區(qū)別于那些基于底層的框架，卻并非逆道而行，而是信奉返璞歸真之道。


2017-1209 ZanUI (Vue)
2017-1218 Onsen UI(Vue, React, Angular)
2017-1215 增加 Vuetify, Weex UI, Semantic UI React,ele...
    
                                                   
                          
    
                                
    
                                    only_do
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    UI大全：前端UI框架集合（持續(xù)更新，當(dāng)前32個(gè)）
    
                                                     
    摘要：簡(jiǎn)潔直觀強(qiáng)悍的前端開發(fā)框架，讓開發(fā)更迅速簡(jiǎn)單。是一套基于的前端框架。首個(gè)版本發(fā)布于年金秋，她區(qū)別于那些基于底層的框架，卻并非逆道而行，而是信奉返璞歸真之道。


2017-1209 ZanUI (Vue)
2017-1218 Onsen UI(Vue, React, Angular)
2017-1215 增加 Vuetify, Weex UI, Semantic UI React,ele...
    
                                                   
                          
    
                                
    
                                    church
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                           
                

              

              
               

                  
                  
發(fā)表評(píng)論

                   
               

              

                

                  
0條評(píng)論
   
                
 
                      

              

           

           
        

      
 
    

    
     

      
    

    
    

    
       
       

         
閱讀需要支付1元查看
  
         
     
       

      
  
    
    












<