dcloudio / uni-ui

基于uni-app的、全端兼容的、高性能UI框架
https://uniapp.dcloud.io/component/uniui/uni-ui.html
Apache License 2.0
1.89k stars 668 forks source link

uni-grid 严重的样式BUG,是uni-grid还是配合uni-segmented-control造成的? #764

Open dong-lufei opened 1 year ago

dong-lufei commented 1 year ago

如下代码,非当前默认激活的选项卡下面的网格布局样式宽高就变成0了

<template>
    <view>
        <uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="button"
            activeColor="#4cd964"></uni-segmented-control>
        <view class="content">
            <view v-show="current === 0">
                选项卡1的内容
                <uni-section title="自定义列数" type="line" padding>
                    <uni-grid :column="3" :highlight="true" @change="change">
                        <uni-grid-item v-for="(item, index) in 8" :index="index" :key="index">
                            <view class="grid-item-box" style="background-color: #fff;">
                                <uni-icons type="image" :size="30" color="#777" />
                                <text class="text">文本信息</text>
                            </view>
                        </uni-grid-item>
                    </uni-grid>
                </uni-section>
            </view>
            <view v-show="current === 1">
                选项卡2的内容
                <uni-section title="自定义列数" type="line" padding>
                    <uni-grid :column="4" :highlight="true" @change="change">
                        <uni-grid-item v-for="(item, index) in 8" :index="index" :key="index">
                            <view class="grid-item-box" style="background-color: #fff;">
                                <uni-icons type="image" :size="30" color="#777" />
                                <text class="text">文本信息</text>
                            </view>
                        </uni-grid-item>
                    </uni-grid>
                </uni-section>
            </view>
            <view v-show="current === 2">
                选项卡3的内容
                <uni-section title="自定义列数" type="line" padding>
                    <uni-grid :column="5" :highlight="true" @change="change">
                        <uni-grid-item v-for="(item, index) in 8" :index="index" :key="index">
                            <view class="grid-item-box" style="background-color: #fff;">
                                <uni-icons type="image" :size="30" color="#777" />
                                <text class="text">文本信息</text>
                            </view>
                        </uni-grid-item>
                    </uni-grid>
                </uni-section>
            </view>
        </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                items: ['选项1', '选项2', '选项3'],
                current: 0
            };
        },
        methods: {
            change(e) {
                let {
                    index
                } = e.detail
                this.list[index].badge && this.list[index].badge++

                uni.showToast({
                    title: `点击第${index+1}个宫格`,
                    icon: 'none'
                })
            },
            onClickItem(e) {
                if (this.current != e.currentIndex) {
                    this.current = e.currentIndex;
                }
            }
        }
    };
</script>

在vue3 下 以上代码 uni-grid 组件 渲染后第2选项卡和第3选项卡(如果当前默认激活第1选项卡)变成如下 <uni-view data-v-7a807eb7="" class="uni-grid-item" style="width: 0px; height: 0px;"> ... </uni-view> 如果默认激活选项卡2或3,那么其他2个选项卡的网格布局样式也是0

18148764734 commented 10 months ago

已确认您的问题,现由我来负责排查跟进

18148764734 commented 10 months ago

临时解决方案:用v-if代替v-show来控制显隐