为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

先来预览一下H5效果图:

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

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

下面我们来具体看看

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

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

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

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

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

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

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弹性布局该如何灵活运用?

下面简单介绍一下

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

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

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个注释,除了第一个注释是真的以外,第二、第三个是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使用阿里巴巴矢量图标库
喜欢的可以关注我哦!

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
1.5万
获赞与收藏
5278

关注作者,订阅最新文章

阅读免费教程

  • 推荐
  • 1
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消