Open dong-lufei opened 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
<uni-view data-v-7a807eb7="" class="uni-grid-item" style="width: 0px; height: 0px;"> ... </uni-view>
已确认您的问题,现由我来负责排查跟进
临时解决方案:用v-if代替v-show来控制显隐
如下代码,非当前默认激活的选项卡下面的网格布局样式宽高就变成0了
在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