sco
sco
  • 发布:2022-04-27 15:09
  • 更新:2023-01-09 16:40
  • 阅读:812

【报Bug】小程序slot和v-for使用异常,只展示最后一项

分类:uni-app

产品分类: uniapp/小程序/微信

PC开发环境操作系统: Windows

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

HBuilderX类型: 正式

HBuilderX版本号: 3.4.7

第三方开发者工具版本号: stable 1.05.2204180

基础库版本号: 2.24.1

项目创建方式: HBuilderX

示例代码:
<template>  
    <view>  
        <view v-for="(item, index) in list" :key="index">  
            <slot :item="item"></slot>  
        </view>  
    </view>  
</template>

使用示例:

<template>  
    <view>  
        <page-navview isBack="true" title="base" />  
        <szyDragList :list="list">  
            <template slot-scope="{ item }">  
                <view class="u-m-30" style="width: 500rpx;height: 200rpx;background: #00AAFF;">  
                    <view> {{item.label}}</view>  
                    <image class="u-w-32 u-h-32" :src="kImage('/release/editor_add.png')"></image>  
                    <image class="u-w-32 u-h-32" src="kImage"></image>  
                    <text style="color: #FFFFFF;">aaa</text>  
                </view>  
            </template>  
        </szyDragList>  
    </view>  
</template>

操作步骤:

使用示例中<image class="u-w-32 u-h-32" :src="kImage('/release/editor_add.png')"></image>
这个src这样用,必现问题,列表只会展示最后一项
把这个image标签去掉,或者简单设置src一张图片就没问题

预期结果:

列表正常使用渲染

实际结果:

列表内容会导致,只展示最后一项

bug描述:

slot配合v-for使用,想实现列表组件,可能导致只显示最后一项内容。
跟列表内容有关系,简单的内容没问题,这里加了某个image的用法必现。
图一为正常期望效果,图二可见列表只展示了最后一项。

2022-04-27 15:09 负责人:无 分享
已邀请:
青丝绕指柔

青丝绕指柔

同样遇到这个问题,H5下面是正常的但是小程序不正常。

shiooood

shiooood

有解决吗请问

BoredApe

BoredApe - 有问题就会有答案。

请上传一个能重现问题的测试工程

  • sco (作者)

    附件已上传项目,感谢

    2022-04-28 19:51

要回复问题请先登录注册