像风一样ovo
像风一样ovo
  • 发布:2024-12-30 19:58
  • 更新:2024-12-31 16:02
  • 阅读:73

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

分类:uni-app

产品分类: uniapp/H5

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win11

HBuilderX类型: 正式

HBuilderX版本号: 4.36

浏览器平台: Chrome

浏览器版本: Microsoft Edge 版本 126.0.2592.87 (正式版本) (64 位)

项目创建方式: HBuilderX

示例代码:
 <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中的数据都是正常的

2024-12-30 19:58 负责人:DCloud_UNI_OttoJi 分享
已邀请:
DCloud_UNI_OttoJi

DCloud_UNI_OttoJi - 日常回复 uni-app/x 问题,如果艾特我没看到,请主动私信

提供个完整工程,或者简化一下代码,我无法直接运行

  • 像风一样ovo (作者)

    <template>  
    <view class="container">
    <!--unitest-->
    <uni-section title="滑动视图" type="line" padding>
    <button type="primary" @click="indexChange()">indexChange</button>
    <!-- 因为swiper特性的关系,请指定swiper的高度 ,swiper的高度并不会被内容撑开-->
    <swiper class="swiper" :indicator-dots="true" :current="current">
    <swiper-item v-for="(i, index) in 3" v-show="current === index">
    <uni-grid :column="3" :highlight="true" @change="change">
    <uni-grid-item v-for="(item, index) in 9" :index="index" :key="index">
    <view class="grid-item-box">
    <image :src="item.url" class="image" mode="aspectFill" />
    <text class="text">{{ item }}</text>
    </view>
    </uni-grid-item>
    </uni-grid>
    </swiper-item>
    </swiper>
    </uni-section>
    </view>
    </template>

    <script>
    export default {
    components: {},
    data() {
    return {
    dynamicList: [],
    list: [],
    current: 0,
    };
    },
    methods: {
    indexChange() {
    this.current = (this.current + 1) % 3;
    },
    },
    };
    </script>

    基于官方hello-uni-ui修改实现,css样式可参考,项目/pages/extUI/grid/grid.vue

    操作步骤:点击indexchange按钮,会切换current,但页面元素错误

    2025-02-05 15:53

要回复问题请先登录注册