微信小程序:功能更新中页面(图片等比缩放)
来源:ThinkinLiu     阅读:538
源码超市
发布于 2019-06-11 05:50
查看主页

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

功能更新中.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):关注公众号,一起源创,一起学习!
免责声明:本文为用户发表,不代表网站立场,仅供参考,不构成引导等用途。 系统环境 服务器应用
相关推荐
详解 CSS 属性 - 伪类和伪元素的区别
linux编译内核的步骤
SpringCloudStream实战
为什么选择MVVM而不是MVP之Android架构篇
MODBUS通讯 串口调试助手与西门子PLC通讯全解(上)
首页
搜索
订单
购物车
我的