公司新闻 行业动态 技术分享

小程序ajax加载完成前,界面已经渲染完成,如何防止图片拉伸变形或界面闪烁

发布日期: 浏览次数: 106

微信小程序开发时,往往异步加载的数据还没有加载完成,界面就已经显示,界面上会产生图片拉伸变形或元素一闪而过的问题,影响用户体验。
碰到这种情况可以在数据加载完成后再显示界面

js

定义变量,初始化时界面为隐藏状态

  1. data:{
  2. hidden: true
  3. }
wxml

container作为最外层容器

  1. <view class="container" hidden="{{hidden}}">
  2. </view>
加载完成后
  1. let page = this;
  2. app.loading();//显示微信加载
  3. app.post("api/ucenter/index.do", {}, function(res) {
  4. page.setData({
  5. hidden: false,
  6. xx: res.data.data.xx
  7. });
  8. wx.hideLoading();//关闭加载
  9. })

扫一扫关注我们

厦门奇站网络科技有限公司

电话:13313868605

QQ:3413772931

地址:厦门软件园三期A02

网站地图