同 bug 描述
者行孙
- 发布：2022-02-11 14:26
- 更新：2022-02-11 21:35
- 阅读：328
产品分类： uniapp/小程序/微信
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： Windows10 20H2
第三方开发者工具版本号： 1.05.2111300
基础库版本号： 2.22.0
项目创建方式： CLI
CLI版本号： 2.0.1-33520211229002
操作步骤：
预期结果：
使用 slot 和 不使用 slot 在 v-for 中渲染保持一致
使用 slot 和 不使用 slot 在 v-for 中渲染保持一致
实际结果：
使用 slot 时在 v-for 中无法正确渲染
使用 slot 时在 v-for 中无法正确渲染
bug描述：
需要实现一个弹幕的功能，
根据时间轴动态将弹幕push到barragesActive中、
等该弹幕卷动完毕（2秒）再从barragesActive中移除、
由于弹幕组件需要泛用并可以自定义内容，
弹幕组件故有如下结构：
<template>
<view class="barrages">
<view
v-for="barrage of barragesActive"
class="barrage"
:key="barrage.id"
:id="barrage.id"
:data-id="barrage.id"
:style="{
top: barrage.top,
}"
>
<image class="avatar" :src="barrage.avatar"></image>
<slot v-bind:barrage="barrage">
<view class="name">{{ barrage.name }}</view>
<view class="content">{{ barrage.content }}</view>
</slot>
</view>
</view>
</template>逻辑上 barragesActive 是根据时间轴动态增减的
当使用 slot 时，已有弹幕在滚动中一旦 barragesActive 数组 push 了新弹幕，则已有的弹幕的动画被重置，v-for 疑似被整块重新渲染。
当去除 slot 时，所有弹幕能正确播放滚动动画，并在动画播放完毕后正确移除。
经排查发现，使用 slot 时，v-for 渲染出来的元素：
:data-id 是正常动态变化的、
:id 变成了固定的几个且永远不再变化，:id 和 :data-id 不一致、
:key 似乎未生效。
一但去除 slot：
:data-id 是正确动态变化的、
:id 和 :data-id 正确保持一致、
:key 生效。
1 个回复
小枫叶 - 外包接单加v:wlmk1234567 注明来意
单独引这个插槽会怎么样