UI制作：雨滴滑落动画、app使用阿里巴巴矢量图标库

通过本章节你能学到那些？

先来预览一下H5效果图：

这里我们主要用到了以下技术点：
1、SCSS + "阿里巴巴矢量图标库"
2、css3 flex布局
3、css3 动画
4、scss 循环遍历
5、NavigationBar兼容app/小程序
6、调用原生api(修改头部状态颜色)

下面我们来具体看看

SCSS + "阿里巴巴矢量图标库"

如何你还不会使用"阿里巴巴矢量图标库"的小伙伴，可以点这里：
阿里巴巴矢量图标库Iconfont的使用方法

h5小程序端，随便一种方法，都可以用起来，但是app端就不行了，如果引入字体，会找不到。

正确方法：
1、选择图标，下载至本地

2、解压，选择 “iconfont.css”复制到项目下“commons”下（没有这个目录新建一个）

3、修改“iconfont.css”

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

把，其他src都删除掉，只留下base64的即可。

4、应用 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个注释，除了第一个注释是真的以外，第二、第三个是Uni App判断设备的语法，这里就是，如果是小程序，就渲染.mp-search-box这块内容。

所以，小程序预览图如下：

调用原生api(修改头部状态颜色)

同理，调用原生api，我们也需要判断设备，否则h5端就会报错了。

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

我们修改，头部状态（信号、wifi、时间、电量等）颜色

真机调试预览图：

提示：

这里判断设备，并不是把代码带到包里面才判断，而是打包编译时，针对不同设备就生成对应代码包了。

能调用的原生api:

是不是看了图，感觉js怎么这么强大，对，就是这么强大。

总结

通过本章节，大家都学到了那些知识点了？每天进步一点点，后面日子好过点哦，加油。

最后谢谢大家支持！

喜欢的可以关注我哦!

原文地址：http://www.javanx.cn/20190826/uni-app2/