UI製做：雨滴滑落動畫、app使用阿里巴巴矢量圖標庫

經過本章節你能學到那些？

先來預覽一下H5效果圖：

這裏咱們主要用到了如下技術點： 一、SCSS + "阿里巴巴矢量圖標庫" 二、css3 flex佈局 三、css3 動畫 四、scss 循環遍歷 五、NavigationBar兼容app/小程序 六、調用原生api(修改頭部狀態顏色)

下面咱們來具體看看

SCSS + "阿里巴巴矢量圖標庫"

如何你還不會使用"阿里巴巴矢量圖標庫"的小夥伴，能夠點這裏： 阿里巴巴矢量圖標庫Iconfont的使用方法

h5小程序端，隨便一種方法，均可以用起來，可是app端就不行了，若是引入字體，會找不到。

正確方法： 一、選擇圖標，下載至本地

二、解壓，選擇 「iconfont.css」複製到項目下「commons」下（沒有這個目錄新建一個）

三、修改「iconfont.css」

@font-face {
  font-family: "iconfont";
  src: url('data:application/x-font-woff2;charset=utf-8;base64...);
}
...
複製代碼

把，其餘src都刪除掉，只留下base64的便可。

四、應用 iconfont

<i class="iconfont"></i>
<!--or-->
<i class="icon iconfont icon-calendar"></i>
複製代碼

這裏的「」、「icon-calendar」分別是"阿里巴巴矢量圖標庫"的 Unicode和Font Class。須要根據你選擇的圖標來決定。

css3 flex佈局

對flex不瞭解的小夥伴，能夠點這裏： CSS3中Flex彈性佈局該如何靈活運用？

下面簡單介紹一下

.dis-flex{
  display: flex;
}
.flex-item{
  flex: 1;
}
複製代碼

.dis-flex下沒有定義.flex-item類的容器，會自動根據內容寬度自適應。定義了.flex-item類的容器，寬度等於總寬減去另一個沒有定義容器的寬度，都定義了，根據「flex: 數值」裏面的數值等比分割。

css3 動畫

推薦文章：如何快速上手基礎的CSS3動畫

製做窗戶雨滴的效果，其結構並不太複雜。主要分兩個層次，其中是窗戶，而另個是雨滴。在案例中使用.window來表示窗戶，在.raindrops容器中放置了上面個雨滴.雨滴是經過.border和.drops來製做。而且將窗戶.window和雨滴.raindrops都放置在容器.rain-container中

scss:

NavigationBar兼容app/小程序

小程序的頂部是沒有辦法自定義的，最多隻能修改文字顏色，和背景顏色。因此，向咱們效果圖，頂部帶搜索框的，小程序上是沒有辦法實現的，因此，咱們須要作兼容處理

<!-- 小程序頭部兼容 -->
<!-- #ifdef MP -->
<view class="mp-search-box"><strong></strong>
  <input class="ser-input" type="text" value="輸入關鍵字搜索" />
</view>
<!-- #endif -->
複製代碼

這段代碼裏面的3個註釋，除了第一個註釋是真的之外，第2、第三個是Uni App判斷設備的語法，這裏就是，若是是小程序，就渲染.mp-search-box這塊內容。

因此，小程序預覽圖以下：

調用原生api(修改頭部狀態顏色)

同理，調用原生api，咱們也須要判斷設備，不然h5端就會報錯了。

loadData() {
  // #ifdef APP-PLUS
  plus.navigator.setStatusBarStyle('light');
  // #endif
},
複製代碼

咱們修改，頭部狀態（信號、wifi、時間、電量等）顏色

真機調試預覽圖：

提示：

這裏判斷設備，並非把代碼帶到包裏面才判斷，而是打包編譯時，針對不一樣設備就生成對應代碼包了。

能調用的原生api:

是否是看了圖，感受js怎麼這麼強大，對，就是這麼強大。

總結

經過本章節，你們都學到了那些知識點了？天天進步一點點，後面日子好過點哦，加油。

最後謝謝你們支持！

喜歡的能夠關注我哦!

原文地址：www.javanx.cn/20190826/un…