@tarojs\plugin-platform-alipay-支付宝小程序PickerViewColumn不渲染 渲染空白节点

[wuxingtao]

相关平台

支付宝小程序

小程序基础库: 2.9.30
使用框架: Vue 3

复现步骤

支付宝小程序
Taro版本：4.0.7 ，| 3.3.16

      <view>picker-view 组件</view>
      <picker-view indicator-style="height: 50px;" style="width: 100%; height: 200px" value="0">
        <picker-view-column>
          <view v-for="(item, index) in list" :key="index">{{ item }}</view>
        </picker-view-column>
      </picker-view>

import { ref } from 'vue'
const list = ref(['选项1', '选项2', '选项3'])

期望结果

1、picker-view-column下的for循环正常渲染
2、picker-view-column下渲染的view不要有空白节点

实际结果

1、Taro4无法显示：未报错，列表不渲染；
2、Taro3显示列表：但是存在空白节点；

参考修复：base.axml

按如下渲染即可正常展示：
<template name="tmpl_0_38">
  <picker-view value="{{i.p5}}" indicator-style="{{i.p1}}" indicator-class="{{i.p0}}" mask-style="{{i.p3}}" mask-class="{{i.p2}}" onChange="eh" name="{{i.p4}}" style="{{i.st}}" class="{{i.cl}}" onTap="eh" onTouchMove="eh" onTouchEnd="eh" onTouchCancel="eh" onLongTap="eh"  id="{{i.uid||i.sid}}" data-sid="{{i.sid}}">
    <block a:for="{{i.cn}}" a:key="sid">
      <picker-view-column class="{{item.cl}}" style="{{item.st}}">
        <template is="{{xs.a(0, item.nn)}}" data="{{i:item}}" a:for="{{item.cn}}" a:key="sid" />
            </picker-view-column>
    </block>
  </picker-view>
</template>

环境信息

  Taro CLI 4.0.7 environment info:
    System:
      OS: Windows 11 10.0.22621
    Binaries:
    npmPackages:
      @tarojs/cli: 4.0.7 => 4.0.7
      @tarojs/components: 4.0.7 => 4.0.7
      @tarojs/helper: 4.0.7 => 4.0.7
      @tarojs/plugin-framework-vue3: 4.0.7 => 4.0.7
      @tarojs/plugin-http: 4.0.7 => 4.0.7
      @tarojs/plugin-platform-alipay: 4.0.7 => 4.0.7
      @tarojs/plugin-platform-h5: 4.0.7 => 4.0.7
      @tarojs/plugin-platform-harmony-hybrid: 4.0.7 => 4.0.7
      @tarojs/plugin-platform-jd: 4.0.7 => 4.0.7
      @tarojs/plugin-platform-qq: 4.0.7 => 4.0.7
      @tarojs/plugin-platform-swan: 4.0.7 => 4.0.7
      @tarojs/plugin-platform-tt: 4.0.7 => 4.0.7
      @tarojs/plugin-platform-weapp: 4.0.7 => 4.0.7
      @tarojs/runtime: 4.0.7 => 4.0.7
      @tarojs/shared: 4.0.7 => 4.0.7
      @tarojs/taro: 4.0.7 => 4.0.7
      @tarojs/taro-loader: 4.0.7 => 4.0.7
      @tarojs/webpack5-runner: 4.0.7 => 4.0.7
      babel-preset-taro: 4.0.7 => 4.0.7
      eslint-config-taro: 4.0.7 => 4.0.7

---

补充信息

问题在于：@tarojs\plugin-platform-alipay渲染picker-view模板异常

// 问题代码
        this.modifyLoopBody = (child, nodeName) => {
            if (nodeName === 'picker-view') {
                return `<picker-view-column class="{{item.cl}}" style="{{item.st}}">
        <view a:for="{{item.cn}}" a:key="sid">
          ${child}
        </view>
      </picker-view-column>`;
            }
            return child;
        };

支付宝小程序 - picker-view组件模板渲染到base.axml里的模板；
Taro4 编译出来的这块模板有问题；（无法渲染）
Taro3 渲染的模板也有小问题：for 循环会以 Fragment 作为父节点，这里会生成 2 个文字节点 （列表多出来一个空白）