先来预览一下H5效果图:javascript
这里咱们主要用到了如下技术点: 一、SCSS + "阿里巴巴矢量图标库" 二、css3 flex布局 三、css3 动画 四、scss 循环遍历 五、NavigationBar兼容app/小程序 六、调用原生api(修改头部状态颜色)css
下面咱们来具体看看java
如何你还不会使用"阿里巴巴矢量图标库"的小伙伴,能够点这里: 阿里巴巴矢量图标库Iconfont的使用方法css3
h5小程序端,随便一种方法,均可以用起来,可是app端就不行了,若是引入字体,会找不到。小程序
正确方法: 一、选择图标,下载至本地api
二、解压,选择 “iconfont.css”复制到项目下“commons”下(没有这个目录新建一个) 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。须要根据你选择的图标来决定。
对flex不了解的小伙伴,能够点这里: CSS3中Flex弹性布局该如何灵活运用?
下面简单介绍一下
.dis-flex{
display: flex;
}
.flex-item{
flex: 1;
}
复制代码
.dis-flex
下没有定义.flex-item
类的容器,会自动根据内容宽度自适应。定义了.flex-item
类的容器,宽度等于总宽减去另一个没有定义容器的宽度,都定义了,根据“flex: 数值”里面的数值等比分割。
推荐文章:如何快速上手基础的CSS3动画
制做窗户雨滴的效果,其结构并不太复杂。主要分两个层次,其中是窗户,而另个是雨滴。在案例中使用.window来表示窗户,在.raindrops容器中放置了上面个雨滴.雨滴是经过.border和.drops来制做。而且将窗户.window和雨滴.raindrops都放置在容器.rain-container中
scss:
小程序的顶部是没有办法自定义的,最多只能修改文字颜色,和背景颜色。因此,向咱们效果图,顶部带搜索框的,小程序上是没有办法实现的,因此,咱们须要作兼容处理
<!-- 小程序头部兼容 -->
<!-- #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,咱们也须要判断设备,不然h5端就会报错了。
loadData() {
// #ifdef APP-PLUS
plus.navigator.setStatusBarStyle('light');
// #endif
},
复制代码
咱们修改,头部状态(信号、wifi、时间、电量等)颜色
真机调试预览图:
提示:
这里判断设备,并非把代码带到包里面才判断,而是打包编译时,针对不一样设备就生成对应代码包了。
能调用的原生api:
是否是看了图,感受js怎么这么强大,对,就是这么强大。
经过本章节,你们都学到了那些知识点了?天天进步一点点,后面日子好过点哦,加油。
最后谢谢你们支持!