在做一个页面，就是告诉别人当前查询数据为空的这样的一个 页面。
一般这样的图片，都是图片垂直居中的。
因此便使用了 margin-top 与 height 的方法。
并且在 hbuilder 内置浏览器中显示已经正常 【 图 1 】
但是在打包微信小程序之后，发布的微信小程序工具里面，却发现其无法正常显示。
【图2】中，我使用了一个中间层，其高度设置了当前页面的额百分之四十 ， 其在代码里面也显示了 200多 px ， 但是实际上显示确实0 【图三】
下面附上对应的代码 ， 希望有前端大佬能指点一二 ， 谢谢各位
<template>
<view>
<u-navbar :is-back="false" :is-fixed="true" title="11/2020" title-size="36">
</u-navbar>
<!-- 获取日记容器 -->
<view class="diary-box">
<template v-if="list.length != 0">
<!-- 日记列表信息 -->
<view class="diary-div">
<!-- 日记格式信息 -->
</view>
</template>
<template v-else>
<u-row :style="'height:' + ( 0.4 * windowHeight) + 'px ;'" style="overflow: hidden;"></u-row>
<u-empty style="" text="快起记录信息吧" mode="list"></u-empty>
</template>
</view>
<!-- 底部导航栏 -->
<u-tabbar mid-button-size="60" v-model="tabbarCurrent" :list="tabbarList" :mid-button="true"
@change="clickTabbar"></u-tabbar>
</view>
</template>
<script>
import request from '../../common/request.js'
import Wxx from '../../common/wx.js'
export default {
data() {
return {
windowHeight: 0,
list: [],
tabbarList: [{
iconPath: "https://cdn.uviewui.com/uview/common/min_button.png",
selectedIconPath: "https://cdn.uviewui.com/uview/common/min_button.png",
midButton: true,
customIcon: false,
}],
tabbarCurrent: -1
}
},
methods: {
//用户登录
login() {
uni.showLoading({
title: "正在登录中",
mask: true // 防止穿透
})
//从缓存内获取当前登录用户的数据信息
Wxx.login({
success: res => {
console.log(res)
},
complete: () => {
uni.hideLoading()
}
})
},
clickTabbar(details) {
//点击底部导航栏事件
console.log(details)
this.routerIntoWrite()
},
routerIntoWrite() {
this.$u.route({
url: 'pages/dialog/dialog'
})
}
},
onLoad() {
uni.getSystemInfo({
success: (details) => {
let windowHeight = details.windowHeight;
console.log(windowHeight);
this.windowHeight = windowHeight;
}
})
// 获取当前用户的信息
this.login()
}
}
</script>
<style>
</style>
