xiaopin
xiaopin
  • 发布:2019-09-02 11:56
  • 更新:2019-09-02 16:27
  • 阅读:1345

【报Bug】在slot中渲染二维数组,当数组内容变更时,渲染结果与预期不一致

分类:uni-app

详细问题描述

(DCloud产品不会有明显的bug,所以你遇到的问题大都是在特定环境下才能重现的问题,请仔细描述你的环境和重现方式,否则DCloud很难排查解决你的问题)

[内容]

在自定义组件中提供一个slot插槽,然后在page中使用该自定义组件,并在slot中通过block渲染二位数组(类似iOS的分组表格样式),当二维数组内容增加时,新增加的UI会显示在插槽的最底部,而不是在数组中对应的位置。

例如原始数据是 [[1,3,5], [2,4,6], [7,9]] 的二维数组,当内容变成[[1,3,5,8], [2,4,6,8], [7,9,8]]时,希望在每一组表格中都输出一个8,但结果是新增加的三个8会统一显示到最后。具体请查看结果和预期的效果图。

如果不在slot中渲染,则UI的表现与预期效果保持一致。

重现步骤

[步骤]

[结果]

在slot中渲染时:

[期望]

不在slot中渲染:

[如果语言难以表述清晰,拍一个视频或截图,有图有真相]

IDE运行环境说明

[HBuilder 或 HBuilderX。如果你用其他工具开发uni-app,也需要在此说明]

HBuilderX

[IDE版本号]

2.2.2.20190816

[mac版本号]

macOS 10.14.4

uni-app运行环境说明

[运行端是h5或app或某个小程序?]

微信小程序

[运行端版本号]

微信开发者工具稳定版 1.02.1907300

[项目是cli创建的还是HBuilderX创建的?如果是cli创建的,请更新到最新版cli再试]

通过HBuilderX创建

[编译模式是老模板模式还是新的自定义组件模式?]

自定义组件模式

附件

[IDE问题请提供HBuilderX运行日志。菜单帮助-查看运行日志,点右键打开文件所在目录,将log文件压缩成zip包上传]

[App问题请提供可重现问题的代码片段,你补充的细一点,问题就解决的快一点]

[App安装包或H5地址]

[可重现代码片段]

已提供示例代码,请下载附件SlotBlock.zip

自定义组件,提供插槽

<template>  
    <view class="content">  
        <slot></slot>  
    </view>  
</template>

在page中使用自定义组件

<template>  
    <view class="content">  
        <!-- 在slot内循环渲染二维数组的内容 -->  
        <custom-view>  
            <block v-for="array in items">  
                <block v-for="item in array">  
                    <view class="cell">  
                        <text>{{item}}</text>  
                    </view>  
                </block>  
                <view class="table-section-separator"></view>  
            </block>  
        </custom-view>  
    </view>  
</template>

联系方式

[email]

pincheng23@hotmail.com

2019-09-02 11:56 负责人:无 分享
已邀请:
DCloud_uniCloud_WYQ

DCloud_uniCloud_WYQ

用一个view把block套起来

<view class="">  
    <block v-for="array in items">  
        <block v-for="item in array">  
            <view class="cell">  
                <text>{{item}}</text>  
            </view>  
        </block>  
        <view class="table-section-separator"></view>  
    </block>  
</view>
5***@qq.com

5***@qq.com

好厉害

该问题目前已经被锁定, 无法添加新回复