uni-app 使用v-show轮流加载使用v-for渲染的uni-grid时会出现加载不全的问题 并且官方示例也复现了问题

uni-app 使用v-show轮流加载使用v-for渲染的uni-grid时会出现加载不全的问题 并且官方示例也复现了问题

产品分类

uniapp/H5

开发环境信息

示例代码

<template>  
    <view class="viewport">  
        <!-- 推荐封面图 -->  
        <view class="cover">  
            <image :src="bannerPicture"></image>  
        </view>  
        <!-- 推荐选项 -->  
        <view class="tabs">  
            <text  
                v-for="(item, index) in subTypes"  
                :key="item.id"  
                class="text"  
                :class="{ active: index === activeIndex }"  
                @tap="activeIndex = index"  
            >  
                {{ item.title }}  
            </text>  
        </view>  
        <!-- 推荐列表 -->  
        <scroll-view  
            v-for="(item, index) in subTypes"  
            :key="item.id"  
            v-show="activeIndex === index"  
            scroll-y  
            class="scroll-view"  
            @scrolltolower="onScrolltolower"  
        >  
            <uni-grid :column="2" :showBorder="false" :square="false">  
                <uni-grid-item v-for="(goods, index2) in item.goodsItems.items" :key="goods.id">  
                    <view class="goods">  
                        <navigator hover-class="none" class="navigator" :url="`/pages/goods/goods?id=${goods.id}`">  
                            <image class="thumb" :src="goods.picture"></image>  
                            <view class="name ellipsis">{{ goods.name }}</view>  
                            <view class="price">  
                                <text class="symbol">¥</text>  
                                <text class="number">{{ goods.price }}</text>  
                            </view>  
                        </navigator>  
                    </view>  
                </uni-grid-item>  
            </uni-grid>  
            <view class="loading-text">  
                {{ item.finish ? '没有更多数据了~' : '正在加载...' }}  
            </view>  
        </scroll-view>  
    </view>  
</template>  

<script setup lang="ts">  
import { getHotListAllAPI } from '../../services/home';  
import { onLoad, onReady } from '@dcloudio/uni-app';  
import { ref } from 'vue';  

// 热门推荐页 标题和url  
const hotMap = [  
    { type: '1', title: '特惠推荐', url: '/hot/preference' },  
    { type: '2', title: '爆款推荐', url: '/hot/inVogue' },  
    { type: '3', title: '一站买全', url: '/hot/oneStop' },  
    { type: '4', title: '新鲜好物', url: '/hot/new' },  
];  

// uniapp 获取页面参数  
const query = defineProps<{  
    type: string;  
}>();  
// 获取当前推荐信息  
const currHot = hotMap.find((v) => v.type === query.type);  
// 动态设置标题  
uni.setNavigationBarTitle({ title: currHot!.title });  

// 推荐封面图  
const bannerPicture = ref('');  
// 推荐选项  
const subTypes = ref<(SubTypeItem & { finish?: boolean })[]>([]);  
// 高亮的下标  
const activeIndex = ref(0);  
// 获取热门推荐数据  
const getHotRecommendData = async () => {  
    const res = await getHotListAllAPI(currHot!.url, {  
        // 技巧：环境变量，开发环境，修改初始页面方便测试分页结束  
        page: 1,  
        pageSize: 10,  
    });  
    // 保存封面  
    bannerPicture.value = res.data.result.bannerPicture;  
    // 保存列表  
    subTypes.value = res.data.result.subTypes;  
};  

// 页面加载  
onReady(() => {  
    getHotRecommendData();  
});  

// 滚动触底  
const onScrolltolower = async () => {  
    // 获取当前选项  
    const currsubTypes = subTypes.value[activeIndex.value];  
    // 分页条件  
    if (currsubTypes.goodsItems.page < currsubTypes.goodsItems.pages) {  
        // 当前页码累加  
        currsubTypes.goodsItems.page++;  
    } else {  
        // 标记已结束  
        currsubTypes.finish = true;  
        // 退出并轻提示  
        return uni.showToast({ icon: 'none', title: '没有更多数据了~' });  
    }  

    // 调用API传参  
    const res = await getHotListAllAPI(currHot!.url, {  
        subType: currsubTypes.id,  
        page: currsubTypes.goodsItems.page,  
        pageSize: currsubTypes.goodsItems.pageSize,  
    });  
    // 新的列表选项  
    const newsubTypes = res.data.result.subTypes[activeIndex.value];  
    // 数组追加  
    currsubTypes.goodsItems.items.push(...newsubTypes.goodsItems.items);  
};  
</script>

操作步骤

首先使用 v-for 加载多个外层 view，外层 view 中包裹了 uni-grid（多个 uni-grid 独立），在外层 view 中添加 v-show 属性条件为 current == index，添加一个按钮可以切换 current。

预期结果

多个 grid 显示内容相同。

实际结果

一个 grid 能显示 10 条，第二个 grid 只能显示最后一条。

bug 描述

使用 v-show 轮流加载 v-for 渲染的 uni-grid 时，会出现加载不全的问题，原本两个 tag 中都是 10 条数据，但是第一个加载的能正常显示 10 条数据，第二个就只能显示最后一条数据，并且如果去掉 v-show，或者去掉 uni-grid 会发现两个 v-for 中的数据都是正常的。