2***@qq.com
2***@qq.com
  • 发布:2022-11-24 17:07
  • 更新:2024-01-02 16:51
  • 阅读:516

微信小程序使用插槽时会出现一个view标签包裹这个插槽导致布局异常

分类:uni-app

例如有一个 List 组件,这个组件可以根据我数据条数来生成对应的 ListItem。Item的样式不是固定死的,是通过插槽传入。

List 组件代码(插槽部分)

<view class="card-list-item" :key="index" v-for="item, index in props.list ?? []">  
      <slot name="item" :item="item" :index="index"/>  
      <nut-divider v-if="index !== (props.list ?? []).length - 1" />  
    </view>

使用 List (插槽部分)

<template #item="data">  
  <view class="piece-content">{{data.index}}</view>  
 </template>

问题:

  1. 通过插槽渲染的内容,外面包裹了一个view标签,导致样式有问题

  1. 在多次尝试后又发现一个问题,当我插槽存在props的时候,例如: <slot :item="item" / >,正常渲染,但出现问题1。没有props的时候问题1解决,但我 List 组件插槽渲染就出现问题了,例如我数据有3条,本应该渲染3次插槽内容,但只渲染了1次。如下图,第一个ss字符应该在每一行都出现,但只在第1行渲染了,0-3是List遍历的时候输出的index。

附件中test.zip是简单复现,直接运行看起来可能没问题,我在代码里写了有问题的几种情况与注释

2022-11-24 17:07 负责人:无 分享
已邀请:
2***@qq.com

2***@qq.com (作者)

附件中test.zip是简单复现,直接运行看起来可能没问题,我在代码里写了有问题的几种情况与注释

2***@qq.com

2***@qq.com (作者)

问题2变成了问题1...

YUANRJ

YUANRJ

您好,什么版本? 我这边没有复现标签包裹问题

  • 2***@qq.com (作者)

    "@dcloudio/uni-app": "3.0.0-alpha-3060720221018006",

    "@dcloudio/uni-app-plus": "3.0.0-alpha-3060720221018006",

    "@dcloudio/uni-components": "3.0.0-alpha-3060720221018006",

    "@dcloudio/uni-h5": "3.0.0-alpha-3060720221018006",

    "@dcloudio/uni-mp-alipay": "3.0.0-alpha-3060720221018006",

    "@dcloudio/uni-mp-baidu": "3.0.0-alpha-3060720221018006",

    "@dcloudio/uni-mp-kuaishou": "3.0.0-alpha-3060720221018006",

    "@dcloudio/uni-mp-lark": "3.0.0-alpha-3060720221018006",

    "@dcloudio/uni-mp-qq": "3.0.0-alpha-3060720221018006",

    "@dcloudio/uni-mp-toutiao": "3.0.0-alpha-3060720221018006",

    "@dcloudio/uni-mp-weixin": "3.0.0-alpha-3060720221018006",

    "@dcloudio/uni-quickapp-webview": "3.0.0-alpha-3060720221018006",

    2022-11-29 18:19

DCloud_UNI_GSQ

DCloud_UNI_GSQ

scopedSlotsCompiler 配置为:augmented 试一下

相关文档:https://uniapp.dcloud.net.cn/collocation/manifest.html#mp-weixin

  • 3***@qq.com

    vue3 作用域插槽 这个多出来的view影响布局, 请问有什么 解决方法么?

    2023-10-09 13:30

  • 1***@qq.com

    最新版本依然存在,插槽内容没有父容器包裹就会出现

    2024-01-02 16:55

風嵐

風嵐

遇到了同样的问题, default插槽是正常的, 但是 具名插槽 会多包一个view

3***@qq.com

3***@qq.com

我测试出来的 结果是
Vue3 中 使用 作用域插槽 ,

就会 在

  • 微信小程序中 额外 加了一层 view 包裹
  • h5/app-ios端 则 没有 这个问题,
  • 其他端 我没有 测试

有没有 解决办法啊?

  • 1***@qq.com

    检查插槽内容是否是多根节点,改为一个根节点试试

    2024-01-02 16:52

1***@qq.com

1***@qq.com - 骑着小马去泡妞

我也遇到同样的问题,暂时的解决办法就是插槽内容修改为只能一个根节点,多根节点就会默认加一个view标签套着

要回复问题请先登录注册