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

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

功能升级中.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）：关注公众号，一起源创，一起学习！

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

微信小程序功能：商品收藏-图片预览-客服-分享-加入购物车
微信小程序–商品详情页面包含功能点: 商品收藏图片预览客服分享加入购物车跳转到购物车页面(注意:open-type="switchTab") 结构:goods_deta ...
微信小程序：想要点击图片时进行一个放大的功能，写完之后可以正常显示，但点击时图片加载不出来，在此想问一下各路大神有没有解决办法
微信小程序:想要点击图片时进行一个放大的功能,写完之后可以正常显示,但点击时图片加载不出来,在此想问一下各路大神有没有解决办法 wxml: 在这里插入代码片 <view class='zhanp ...
微信小程序app.js中的全局变量globalData改变，如何通知其它页面界面显示改变，小程序中如何在其他页面中监听到globalData中值的变化
微信小程序app.js中的全局变量globalData改变,如何通知其它页面界面显示改变,小程序中如何在其他页面中监听到globalData中值的变化在小程序中,我们一般在app.js的onLaun ...
微信小程序如何生成当前页面二维码
码字不易,有帮助的同学希望能关注一下我的微信公众号:Code程序人生,感谢!代码自用自取. 在微信小程序的开发中,很多的业务场景下都会有生成二维码,然后通过扫码二维码,进入指定页面的需求. 我之前也没 ...
php微信小程序向下滑动,微信小程序功能实现：上滑加载下拉刷新
本篇文章给大家带来的内容是关于微信小程序功能实现:上滑加载下拉刷新,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 之前谈到文章列表的数据加载,是一次性全部加载,这样是不友好的.这章介 ...
微信小程序web-view 外部引用h5页面调用摄像头录制视频配有提示音
微信小程序web-view 外部引用h5页面调用摄像头录制视频配有提示音 1.目前的需求是什么 2.都踩了那些坑 1.小程序 2.h5语音提示 3.语音合成声音录制不进去,ios有时候是麦克风,有时 ...
微信小程序优惠劵功能（包含用户需求，axure原型设计，数据库设计，后台功能，微信小程序功能）
1.用户需求优惠券功能有: 1.后台可以设置优惠券和查看已发出优惠券的状态 2.平台自动给新用户发放优惠劵,或者手动给某些用户发放优惠券 3.用户在小程序中手动领取优惠券 4.用户中心新增" ...
微信小程序input框中加入小图标的实现方法
最近入坑小程序,要求在小程序的输入框中展示一个小图标,页面如下: 然后按照,html页面中的做法,在input框中添加了background-image属性,出乎意料的事,小程序报了下边这样一个错误: ...
微信小程序的订单评论页面-仿淘宝
微信小程序的订单评论页面-仿淘宝在网上搜了下,大部分都挺麻烦的,所以自己写了个,感觉还可以先看效果图: 需要用到的图片: 上代码: wxml: <view class='contains'& ...
微信小程序长按图片不出现菜单_微信小程序实现长按删除图片的示例
说明最近在学小程序,遇到长按图片删除的问题,特此记录,记录自己的成长轨迹需求: 长按删除指定图片需要解决的问题长按事件如何表示出来? 如何获取当前长按元素的下标? 如何删除元素? 解决办法长 ...

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

wxml

wxss

图片

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

最新文章

热门文章