微信小程序：功能升级中页面（图片等比缩放）

在程序开发中，难免会要考虑一些基础业务以外的功能，如错误提示、升级提示、维护提示等...有时候因为时间问题，产品可能只开发部分功能就上线了，而为了让用户知道有这么一个功能，未开发完全的功能则仅放置一个入口，此时就需要一个升级/维护的提示页面...

功能升级中.png

如上图：这个页面很简单，一张图片，一行文字，在代码上，都不需要写任何js代码。仅需改动wxml和wxss即可；

<!--pages/error/update.wxml-->
<view class='vertical'>
  <image'image'src'../../images/icon-update.png'mode'widthFix'></image>
>功能升级中...</text>
在这里，唯一需要注意的是mode='widthFix'，之所以能保持image显示的图片等比缩放，就是通过mode控制的，该属性默认值是scaleToFill，即拉伸充满image容器。另外还有一些其他值，参考官方文档即可，这里不介绍了...?
wxss


.vertical{
  flex-direction column;
}
  backgroundcolor #ffffff;
image {
  width200rpx;
text {
  color#333333;
wxss同样很简单，关键点在于纵向布局vertical，它包含了元素纵向排列flex-direction: column;及居中align-items: center;?
图片


最后，则是在images中放入图片icon-update.png?
简书：ThinkinLiu 博客: IT老五
这只是一个简单的功能升级页面，同时，你也可以将图片和文字改改，改为维护页、错误页或者其他提示页...
                        
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!