国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

WeUI基礎(chǔ)樣式庫——寫一個移動端界面

hedge_hog / 1064人閱讀

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

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

這些密密麻麻的就是壓縮后的樣式庫。密密麻麻地看起來簡直要急死密集恐懼癥啊。不要急，您請往下看。
仔細看我們能看到，這個樣式庫為很多類寫了樣式。也就是說，我們只要在html頁面中使用這些樣式，就能構(gòu)建一個頁面了?！局灰獙戭惷∪チ藶楹芏鄻撕灦x樣式，是不是省事多了呢?】
對WeUI的介紹就到這了，下面都是滿滿的干貨啦。

開始寫頁面前的準備

要想有這個樣式庫，當然要先下載WeUI的樣式庫啦，我提供了兩個下載的地址。

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

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

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

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

單頁應(yīng)用頁面

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

最頂上放置logo

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

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

引入代碼：


    

    

    

    

    

    

    
current vue version 2.5.2

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

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

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

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

引入代碼：

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

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

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

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


接下來我們說說一個彈出框。

頁面彈出框

放上我們要寫的頁面成品圖：

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


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


  

    
Dialog

    
對話框

  

  

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

接下來，我們的dialog就要登場了。直接把dialog的div放在放置按鈕div的后面。

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

weui-dialog__hd：彈框的頭部寫標題；

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

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

接下來，就是給第一個按鈕添加綁定事件了，點擊第一個按鈕就跳出來彈框。

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


當然，weu基礎(chǔ)樣式庫還有很多很多組件可以使用，可以進入https://weui.io/ 查看更多的基礎(chǔ)組件。
接下來讓我們一起學習更多吧！

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/89839.html

相關(guān)文章

  • WeUI基礎(chǔ)樣式庫——寫一個移動端界面

    摘要：是一套基礎(chǔ)樣式庫，同微信原生視覺體驗一致，由微信官方設(shè)計團隊為微信內(nèi)網(wǎng)頁和微信小程序量身設(shè)計的。為了更好的說明這個基礎(chǔ)樣式庫的使用，接下來我將介紹兩個例子。 WeUI是一套基礎(chǔ)樣式庫，同微信原生視覺體驗一致，由微信官方設(shè)計團隊為微信內(nèi)網(wǎng)頁和微信小程序量身設(shè)計的。我們來看看這個基礎(chǔ)庫樣式到底長什么樣。showImg(https://segmentfault.com/img/bVYCKd?...

    meteor199 評論0 收藏0

  • WeUI基礎(chǔ)樣式庫——寫一個移動端界面

    摘要：是一套基礎(chǔ)樣式庫，同微信原生視覺體驗一致，由微信官方設(shè)計團隊為微信內(nèi)網(wǎng)頁和微信小程序量身設(shè)計的。為了更好的說明這個基礎(chǔ)樣式庫的使用，接下來我將介紹兩個例子。 WeUI是一套基礎(chǔ)樣式庫，同微信原生視覺體驗一致，由微信官方設(shè)計團隊為微信內(nèi)網(wǎng)頁和微信小程序量身設(shè)計的。我們來看看這個基礎(chǔ)庫樣式到底長什么樣。showImg(https://segmentfault.com/img/bVYCKd?...

    xiyang 評論0 收藏0

  • UI大全：前端UI框架集合（持續(xù)更新，當前32個）

    摘要：簡潔直觀強悍的前端開發(fā)框架，讓開發(fā)更迅速簡單。是一套基于的前端框架。首個版本發(fā)布于年金秋，她區(qū)別于那些基于底層的框架，卻并非逆道而行，而是信奉返璞歸真之道。 2017-1209 ZanUI (Vue) 2017-1218 Onsen UI(Vue, React, Angular) 2017-1215 增加 Vuetify, Weex UI, Semantic UI React,ele...

    only_do 評論0 收藏0

  • UI大全：前端UI框架集合（持續(xù)更新，當前32個）

    摘要：簡潔直觀強悍的前端開發(fā)框架，讓開發(fā)更迅速簡單。是一套基于的前端框架。首個版本發(fā)布于年金秋，她區(qū)別于那些基于底層的框架，卻并非逆道而行，而是信奉返璞歸真之道。 2017-1209 ZanUI (Vue) 2017-1218 Onsen UI(Vue, React, Angular) 2017-1215 增加 Vuetify, Weex UI, Semantic UI React,ele...

    church 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<