uni-app快手小程序渲染for循环内的插槽显示不正确

发布于 1周前 作者 zlyuanteng 来自 Uni-App

uni-app快手小程序渲染for循环内的插槽显示不正确
遇到了和 插槽内容渲染不正常 快手小程序 中同样的问题，有大佬解答下吗，万分感谢啊

相关链接

Harmonyos Next教程
7 回复

提供一个复现工程。
你提供的这个案例中，子组件 v-for 循环了 slot，这种情况在 web、微信、快手表现均不同，讲 v-for 挪到父组件中处理，保证子组件不会重复出现 slot 就正常了
父组件调整为
<template>
<view class="content">
<text>uni-app在for循环中使用slot插槽运行到快手小程序显示不正常</text>
<KSTabs :tabs="[item]" v-for="(item, index) in list" :key="index">
<template #content=“scope”>
<text>{{ scope.item.name + scope.id }}</text>
</template>
<template #right>
<text>right</text>
</template>
</KSTabs>
</view>
</template> 就正常了


你好，附件已经上传，麻烦指教下，非常感谢

回复 2***@qq.com: 你提供的这个案例中，子组件 v-for 循环了 slot，这种情况在 web、微信、快手表现均不同，讲 v-for 挪到父组件中处理，保证子组件不会重复出现 slot 就正常了

回复 DCloud_UNI_OttoJi: 这个问题说明会放入文档中， slot 的最终表现由各端小程序自行实现，不建议这样编写

回复 DCloud_UNI_OttoJi: https://uniapp.dcloud.net.cn/tutorial/vue-components.html#插槽 文档已更新 这样是否解答了你的问题？

附件

在处理 uni-app 开发快手小程序时，如果遇到 for 循环内的插槽显示不正确的问题，通常可能是由于插槽内容的作用域或渲染机制未正确设置。以下是一个示例代码，展示如何在 uni-app 中正确使用 for 循环和插槽，确保插槽内容能够正确渲染。

首先，确保你的 uni-app 项目已经正确配置并可以运行快手小程序。

父组件代码（Page.vue）

<template>
  <view>
    <ListComponent :items="itemList">
      <template v-slot:item="{ item }">
        <view>
          <text>{{ item.name }}</text>
          <text>{{ item.value }}</text>
        </view>
      </template>
    </ListComponent>
  </view>
</template>

<script>
import ListComponent from './components/ListComponent.vue';

export default {
  components: {
    ListComponent
  },
  data() {
    return {
      itemList: [
        { name: 'Item 1', value: 'Value 1' },
        { name: 'Item 2', value: 'Value 2' },
        { name: 'Item 3', value: 'Value 3' }
      ]
    };
  }
};
</script>

子组件代码（ListComponent.vue）

<template>
  <view>
    <view v-for="(item, index) in items" :key="index">
      <slot name="item" :item="item"></slot>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      required: true
    }
  }
};
</script>

关键点说明

  1. 父组件：在 ListComponent 组件中，使用 v-slot:item 定义了一个名为 item 的插槽，并通过插槽的作用域接收 item 对象。

  2. 子组件：ListComponent 组件接收一个 items 属性，并在 v-for 循环中为每个 item 渲染一个插槽。通过 :item="item" 将当前循环的 item 对象传递给插槽的作用域。

  3. 插槽内容：在父组件中，插槽的内容（即 <template v-slot:item="{ item }"> 内的内容）会根据传递的 item 对象动态渲染。

通过上述方式，可以确保 uni-app 在快手小程序中正确渲染 for 循环内的插槽内容。如果仍有问题，建议检查以下几点：

  • 确保 uni-app 和相关依赖库已更新到最新版本。
  • 检查快手小程序的开发工具及平台是否有相关的已知问题或限制。
  • 使用开发者工具的控制台输出调试信息，查看数据传递是否正确。
回到顶部