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…