9***@qq.com
9***@qq.com
  • 发布:2022-03-31 17:37
  • 更新:2023-08-15 13:26
  • 阅读:543

【报Bug】uni-grid在进入nvue页面后返回会出现页面一行的grid-item少一个。。。

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win10教育版

HBuilderX类型: 正式

HBuilderX版本号: 3.2.12

手机系统: Android

手机系统版本号: Android 7.1.1

手机机型: 平板电脑

页面类型: nvue

vue版本: vue2

打包方式: 离线

项目创建方式: HBuilderX

操作步骤:
<template>  
    <view>  
        <uni-section title="功能列表" type="line" padding>  
            <uni-grid :column="columnNum" :square="false" :highlight="true"  @change="navigateDesc">  
                <uni-grid-item v-for="(item ,index) in list" :index="index" :key="index">  
                    <view class="grid-item-box" style="background-color: #fff;">  
                        <image class="image" :src="item.img" mode="aspectFill" />  
                        <text class="text">{{item.name}}</text>  
                        <view v-if="item.badge" class="grid-dot">  
                            <uni-badge :text="item.badge" :type="item.type" />  
                        </view>  
                    </view>  
                </uni-grid-item>  
            </uni-grid>  
        </uni-section>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                columnNum:4,  
                list: [{  
                        img: "/static/wzxj.png",  
                        name: "考生签到",  
                        url: "/pages/ksqd/qdksxz",  
                        // badge: '0',  
                        // type: "primary"  
                    },{  
                        img: "/static/wzxj.png",  
                        name: "职位面试抽签",  
                        url: "/pages/zwmscq/zwmscq",  
                        // badge: '0',  
                        // type: "primary"  
                    },{  
                        img: "/static/wzxj.png",  
                        name: "考生面试抽签",  
                        url: "/pages/ksmscq/ksmscq",  
                        // badge: '0',  
                        // type: "primary"  
                    },{  
                        img: "/static/wzxj.png",  
                        name: "主考官考室选择",  
                        url: "/pages/ksxz/zkgKsxz/zkgKsxz",  
                        // badge: '0',  
                        // type: "primary"  
                    },{  
                        img: "/static/wzxj.png",  
                        name: "考官考室选择",  
                        url: "/pages/ksxz/kgKsxz/kgKsxz",  
                        // badge: '0',  
                        // type: "primary"  
                    },{  
                        img: "/static/wzxj.png",  
                        name: "监督员考室选择",  
                        url: "/pages/ksxz/jdyKsxz/jdyKsxz",  
                        // badge: '0',  
                        // type: "primary"  
                    },{  
                        img: "/static/wzxj.png",  
                        name: "引导员考室选择",  
                        url: "/pages/ksxz/ydyKsxz/ydyKsxz",  
                        // badge: '0',  
                        // type: "primary"  
                    },{  
                        img: "/static/wzxj.png",  
                        name: "考生抽题",  
                        url: "/pages/ksMsg/ksct/ksct",  
                        // badge: '0',  
                        // type: "primary"  
                    },{  
                        img: "/static/wzxj.png",  
                        name: "考生作答与评分",  
                        url: "/pages/ksMsg/kszdpf/kszdpf",  
                        // badge: '0',  
                        // type: "primary"  
                    },{  
                        img: "/static/wzxj.png",  
                        name: "监督员审核",  
                        url: "/pages/ksMsg/jdysh/jdysh",  
                        // badge: '0',  
                        // type: "primary"  
                    },{  
                        img: "/static/wzxj.png",  
                        name: "查看面试进度",  
                        url: "/pages/zkckmsjd/zkckmsjd",  
                        // badge: '0',  
                        // type: "primary"  
                    },{  
                        img: "/static/wzxj.png",  
                        name: "公屏面试提示",  
                        url: "/pages/gpmsts/gpmsts",  
                        // badge: '0',  
                        // type: "primary"  
                    },  
                ],  
            }  
        },  
        mounted() {  
            console.log(this.columnNum)  
        },  
        onShow() {  
            console.log(this.columnNum)  
            this.columnNum = 4;  
            this.$forceUpdate();  
        },  
        onUnload() {  

        },  
        onHide() {  

        },  
        methods: {  
            navigateDesc(e) {  
                console.log(e);  
                if (this.list[e.detail.index].url != null) {  
                    uni.navigateTo({  
                        url: this.list[e.detail.index].url  
                    });  
                }  
            },  
        }  
    }  
</script>  

<style>  
    .grid-item-box {  
        flex: 1;  
        // position: relative;  
        /* #ifndef APP-NVUE */  
        display: flex;  
        /* #endif */  
        flex-direction: column;  
        align-items: center;  
        justify-content: center;  
        padding: 15px 0;  
    }  

    .image {  
        width: 50rpx;  
        height: 50rpx;  
    }  

    .text {  
        font-size: 26rpx;  
        margin-top: 10rpx;  
    }  

    .grid-dot {  
        position: absolute;  
        top: 5px;  
        right: 15px;  
    }  
</style>  

预期结果:

预期一行4个,

实际结果:

但是进入一个nvue页面以后就有概率变成三个

bug描述:

<template>  
    <view>  
        <uni-section title="功能列表" type="line" padding>  
            <uni-grid :column="columnNum" :square="false" :highlight="true"  @change="navigateDesc">  
                <uni-grid-item v-for="(item ,index) in list" :index="index" :key="index">  
                    <view class="grid-item-box" style="background-color: #fff;">  
                        <image class="image" :src="item.img" mode="aspectFill" />  
                        <text class="text">{{item.name}}</text>  
                        <view v-if="item.badge" class="grid-dot">  
                            <uni-badge :text="item.badge" :type="item.type" />  
                        </view>  
                    </view>  
                </uni-grid-item>  
            </uni-grid>  
        </uni-section>  
    </view>  
</template>

在进入过nvue页面以后有概率会出现一行少一个item的情况,如附件
定义一行为4个就会变成3个,定义为3个就可能出现两个的情况......
columnNum:4,

2022-03-31 17:37 负责人:无 分享
已邀请:
DCloud_UNI_Anne

DCloud_UNI_Anne

请更新uni-grid组件到最新版本,简单逻辑可用示例代码hello uni-app测试下是否复现此问题?

  • 9***@qq.com (作者)

    更新成最新的版本还是有呢....

    2022-04-01 09:37

  • 9***@qq.com (作者)

    我这个app才刚开始写。。。就三个页面。。。基本是最简单的逻辑了

    2022-04-01 09:37

1***@qq.com

1***@qq.com

我也遇到了,楼主解决了吗

要回复问题请先登录注册