用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

微信小程序:功能升级中页面(图片等比缩放)

Rolan 2019-5-28 00:08

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

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

功能升级中.png

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

  1. <!--pages/error/update.wxml-->
  2. <view class='vertical'>
  3. <image class='image' src='../../images/icon-update.png' mode='widthFix'></image>
  4. <text class='text'>功能升级中...</text>
  5. </view>

在这里,唯一需要注意的是mode='widthFix',之所以能保持image显示的图片等比缩放,就是通过mode控制的,该属性默认值是scaleToFill,即拉伸充满image容器。另外还有一些其他值,参考官方文档即可,这里不介绍了... 
wxss

  1. /* pages/error/update.wxss */
  2. .vertical{
  3. display: flex;
  4. flex-direction: column;
  5. align-items: center;
  6. }
  7. .bg-white {
  8. background-color: #ffffff;
  9. }
  10. .image {
  11. margin-top: 30%;
  12. width: 200rpx;
  13. }
  14. .text {
  15. margin-top: 50rpx;
  16. font-size: 40rpx;
  17. color: #333333;
  18. }

wxss同样很简单,关键点在于纵向布局vertical,它包含了元素纵向排列flex-direction: column;及居中align-items: center; 
图片

最后,则是在images中放入图片icon-update.png 
简书:ThinkinLiu 博客: IT老五

这只是一个简单的功能升级页面,同时,你也可以将图片和文字改改,改为维护页、错误页或者其他提示页...

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: ThinkinLiu 来自: 简书