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

经过本章节你能学到那些?

先来预览一下H5效果图:javascript

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

这里咱们主要用到了如下技术点: 一、SCSS + "阿里巴巴矢量图标库" 二、css3 flex布局 三、css3 动画 四、scss 循环遍历 五、NavigationBar兼容app/小程序 六、调用原生api(修改头部状态颜色)css

下面咱们来具体看看java

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

如何你还不会使用"阿里巴巴矢量图标库"的小伙伴,能够点这里: 阿里巴巴矢量图标库Iconfont的使用方法css3

h5小程序端,随便一种方法,均可以用起来,可是app端就不行了,若是引入字体,会找不到。小程序

正确方法: 一、选择图标,下载至本地api

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

二、解压,选择 “iconfont.css”复制到项目下“commons”下(没有这个目录新建一个) UI制做:雨滴滑落动画、app使用阿里巴巴矢量图标库app

三、修改“iconfont.css”布局

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

把,其余src都删除掉,只留下base64的便可。字体

四、应用 iconfontflex

<i class="iconfont"></i>
<!--or-->
<i class="icon iconfont icon-calendar"></i>
复制代码

这里的“”、“icon-calendar”分别是"阿里巴巴矢量图标库"的 Unicode和Font Class。须要根据你选择的图标来决定。

css3 flex布局

对flex不了解的小伙伴,能够点这里: CSS3中Flex弹性布局该如何灵活运用?

下面简单介绍一下

UI制做:雨滴滑落动画、app使用阿里巴巴矢量图标库
.dis-flex{
  display: flex;
}
.flex-item{
  flex: 1;
}
复制代码

.dis-flex下没有定义.flex-item类的容器,会自动根据内容宽度自适应。定义了.flex-item类的容器,宽度等于总宽减去另一个没有定义容器的宽度,都定义了,根据“flex: 数值”里面的数值等比分割。

css3 动画

推荐文章:如何快速上手基础的CSS3动画

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

制做窗户雨滴的效果,其结构并不太复杂。主要分两个层次,其中是窗户,而另个是雨滴。在案例中使用.window来表示窗户,在.raindrops容器中放置了上面个雨滴.雨滴是经过.border和.drops来制做。而且将窗户.window和雨滴.raindrops都放置在容器.rain-container中

scss:

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

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这块内容。

因此,小程序预览图以下:

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

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

同理,调用原生api,咱们也须要判断设备,不然h5端就会报错了。

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

咱们修改,头部状态(信号、wifi、时间、电量等)颜色

真机调试预览图:

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

提示:

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

能调用的原生api:

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

是否是看了图,感受js怎么这么强大,对,就是这么强大。

总结

经过本章节,你们都学到了那些知识点了?天天进步一点点,后面日子好过点哦,加油。

最后谢谢你们支持!

UI制做:雨滴滑落动画、app使用阿里巴巴矢量图标库
喜欢的能够关注我哦!

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

相关文章
相关标签/搜索