在程序开发中, 难免会要考虑一些基础业务以外的功能, 如错误提示, 升级提示, 维护提示等... 有时候因为时间问题, 产品可能只开发部分功能就上线了, 而为了让用户知道有这么一个功能, 未开发完全的功能则仅放置一个入口, 此时就需要一个升级 / 维护的提示页面...
功能升级中. PNG
如上图: 这个页面很简单, 一张图片, 一行文字, 在代码上, 都不需要写任何 JS 代码. 仅需改动 wxml 和 wxss 即可;
- wxml
- <!--pages/error/update.wxml-->
- <view class='vertical'>
- <image class='image' src='../../images/icon-update.png' mode='widthFix'></image>
- <text class='text'> 功能升级中...</text>
- </view>
在这里, 唯一需要注意的是 mode='widthFix', 之所以能保持 image 显示的图片等比缩放, 就是通过 mode 控制的, 该属性默认值是 scaleToFill, 即拉伸充满 image 容器. 另外还有一些其他值, 参考官方文档即可, 这里不介绍了...
- wxss
- /* pages/error/update.wxss */
- .vertical{
- display: flex;
- flex-direction: column;
- align-items: center;
- }
- .bg-white {
- background-color: #ffffff;
- }
- .image {
- margin-top: 30%;
- width: 200rpx;
- }
- .text {
- margin-top: 50rpx;
- font-size: 40rpx;
- color: #333333;
- }
wxss 同样很简单, 关键点在于纵向布局 vertical, 它包含了元素纵向排列 flex-direction: column; 及居中 align-items: center;
图片
icon-update.PNG
最后, 则是在 images 中放入图片 icon-update.PNG
简书: ThinkinLiu 博客: IT 老五
这只是一个简单的功能升级页面, 同时, 你也可以将图片和文字改改, 改为维护页, 错误页或者其他提示页...
IT 老五 (it-lao5): 关注公众号, 一起源创, 一起学习!
来源: http://www.jianshu.com/p/90d9c5db4cd1