uni-app skyline模式下平台对应的组件无法正常使用如list-builder grid-builder

uni-app skyline模式下平台对应的组件无法正常使用如list-builder grid-builder

开发环境 版本号 项目创建方式
Windows 最新 CLI

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

第三方开发者工具版本号：1.06.2503281

基础库版本号：3.7.12

CLI版本号：3.0.0-4050720250324001

示例代码：

<!-- #ifdef MP-WEIXIN -->  
<scroll-view class="scroll-view h-full w-full" scroll-y type="custom">  
  <grid-builder  
    :list="viewedCircles"  
    :child-count="viewedCircles.length"  
    :cross-axis-count="2"  
    :cross-axis-gap="8"  
    :main-axis-gap="4"  
  >  
    <view slot:item slot:index class="bg-blue" style="height: 200px">  
        <view>{{ item }}-{{ index }}</view>  
    </view>  
  </grid-builder>  
</scroll-view>  
<!-- #endif -->

viewedCircles.value = [  
    {  
      id: 1,  
      logo: 'https://picsum.photos/200/200',  
      name: '摄影爱好者',  
      heat: 1234,  
    },  
    {  
      id: 2,  
      logo: 'https://picsum.photos/200/200',  
      name: '美食分享',  
      heat: 2345,  
    },  
    {  
      id: 3,  
      logo: 'https://picsum.photos/200/200',  
      name: '旅行探索',  
      heat: 3456,  
    },  
    {  
      id: 4,  
      logo: 'https://picsum.photos/200/200',  
      name: '科技资讯',  
      heat: 4567,  
    },  
    {  
      id: 5,  
      logo: 'https://picsum.photos/200/200',  
      name: '读书会',  
      heat: 5678,  
    },  
  ];

操作步骤：

如图所示

预期结果：

如图所示

实际结果：

如图所示

bug描述：

求助使用uniapp中怎么避免编译某一段代码？因为要使用该平台的特定组件，但是这个组件插槽传值用vue又没法写出来

如下图所示，

尝试1： 使用

<view slot:item slot:index class="bg-blue" style="height: 200px">  
    <view>{{ item }}-{{ index }}</view>  
</view>

其中 item 和 index 都会被转编译，从而找不到值，

尝试2： 使用

<template #item="{ item, index }">  
      <view>{{ item }}-{{ index }}</view>  
</template>

更多关于uni-app skyline模式下平台对应的组件无法正常使用如list-builder grid-builder的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

组件地址：https://developers.weixin.qq.com/miniprogram/dev/component/grid-builder.html

更多关于uni-app skyline模式下平台对应的组件无法正常使用如list-builder grid-builder的实战教程也可以访问 https://www.itying.com/category-93-b0.html


看到官方文档上显示支持这个组件啊，但没有提供示例，有大佬能帮忙给个思路吗

@DCloud_HB_DYF @DCloud_CHB @DCloud移动团队

有解决吗

可以使用原生组件 ，参考 小程序自定义组件支持

在uni-app的skyline模式下，微信小程序的list-builder和grid-builder组件确实存在与Vue模板语法不兼容的问题。这是因为这些组件使用的是小程序原生的插槽机制，而Vue的插槽语法在编译后无法正确映射到小程序端。

针对这个问题，可以尝试以下解决方案：

  1. 使用条件编译+原生WXML语法：
<!-- #ifdef MP-WEIXIN -->
<scroll-view class="scroll-view h-full w-full" scroll-y type="custom">
  <grid-builder
    list="{{viewedCircles}}"
    child-count="{{viewedCircles.length}}"
    cross-axis-count="2"
    cross-axis-gap="8"
    main-axis-gap="4"
  >
    <view slot="item" slot:index class="bg-blue" style="height: 200px">
      <view>{{item}}-{{index}}</view>
    </view>
  </grid-builder>
</scroll-view>
<!-- #endif -->
  1. 或者使用renderjs方案：
<template>
  <view :change:prop="renderjs.render" :prop="{list: viewedCircles}"></view>
</template>

<script module="renderjs" lang="renderjs">
export default {
  mounted() {
    // 在这里用原生API操作DOM
  }
}
</script>
回到顶部