2834454824@qq.com
2834454824@qq.com
  • 发布:2021-05-03 22:24
  • 更新:4 天前
  • 阅读:37

微信小程序渲染问题 margin-top 与 height 无法生效

分类:uni-app

在做一个页面,就是告诉别人当前查询数据为空的这样的一个 页面。

一般这样的图片,都是图片垂直居中的。
因此便使用了 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>  
2021-05-03 22:24 负责人:无 分享
已邀请:
2834454824@qq.com

2834454824@qq.com (作者)

经过初步检测 , 发现造成问题的主要原因为 u-empty 组件 , 大家在使用其组件的时候 , 请适当的看清楚文档

2834454824@qq.com

2834454824@qq.com (作者)

当前已经确定 , 造成上述原因主要便是由于 u-empty (uView)组件内部的原因造成 。

当前代码已经切换成 color-ui 的组件 , 显示效果正常

其关键代码为:


<template v-else>  
                <view class="cu-item text-center">  
                    <!-- 设置高度为 0.4 的 间隔宽 -->  
                    <view :style="'height:' + (0.4 * windowHeight) + 'rpx'"></view>  
                    <!-- 图标 -->  
                    <view class=" text-xsl padding">  
                        <text class=" cuIcon-text text-grey"></text>  
                    </view>  
                    <!-- 显示文字 -->  
                    <view class="padding-lx">当前并无数据</view>  
                </view>  

            </template>  

其完整代码为:


<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>  
                <view class="cu-item text-center">  
                    <!-- 设置高度为 0.4 的 间隔宽 -->  
                    <view :style="'height:' + (0.4 * windowHeight) + 'rpx'"></view>  
                    <!-- 图标 -->  
                    <view class=" text-xsl padding">  
                        <text class=" cuIcon-text text-grey"></text>  
                    </view>  
                    <!-- 显示文字 -->  
                    <view class="padding-lx">当前并无数据</view>  
                </view>  

            </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',  
                    params: {  
                        name: 'lisa'  
                    }  
                })  
            }  

        },  
        onLoad() {  
            uni.getSystemInfo({  
                success: (details) => {  
                    let windowHeight = details.windowHeight;  
                    console.log(windowHeight);  
                    this.windowHeight = windowHeight;  
                }  
            })  
            // 获取当前用户的信息  
            this.login()  
        }  
    }  
</script>  

<style>  

</style>  

要回复问题请先登录注册