小程式垂直居中

Bright2017發表於2018-12-17
<view class='ercode' style='height:{{viewHeg}}px'>
  <view>
    <image src='https://developers.weixin.qq.com/miniprogram/dev/image/demo.jpg'></image>
  </view>
</view>
.ercode{width:100%;display:flex; justify-content:center; align-items:center;padding: 30rpx;box-sizing: border-box;background-color: transparent;position: fixed;left: 0;top: 0;z-index: 999;}
.ercode>view{width: 400rpx;height: 400rpx;border:2px solid #ededed;padding: 20rpx;box-sizing: border-box;background-color: #ffffff;}
.ercode>view>image{width: 100%;height: 100%;}
data{
    viewHeg: 0
}

onLoad: function(options) {
    // 獲取螢幕可視區域高度
    var that = this;
    wx.getSystemInfo({
      success: function(res) {
        console.log('高度', res.windowHeight);
        that.setData({
          viewHeg: res.windowHeight
        });
      },
    })
  }

 

相關文章