swiper 组件白屏

[actar233]

相关平台

微信小程序

复现仓库

https://github.com/actar233/taro-demo-20240706.git 小程序基础库: 3.2.3 使用框架: Vue 3

复现步骤

Taro版本为 3.6.32，Taro Helper 没有最新版本号

使用 dev:weapp 运行项目

在第一个和第二个 swiper-item 中使用如下结构。view 下嵌套一个 view。微信开发者工具内 swiper 组件不渲染。

具体代码可查看仓库

https://github.com/actar233/taro-demo-20240706/blob/master/src/pages/index/index.vue

在微信开发者工具中查看元素结构, 原有 swiper-item 元素变成了

<view class="h5-swiper-item" />

期望结果

正常渲染

实际结果

无法正常渲染

环境信息

👽 Taro v3.6.32

  Taro CLI 3.6.32 environment info:
    System:
      OS: macOS 14.5
      Shell: 5.9 - /bin/zsh
    Binaries:
      Node: 20.11.0 - ~/.nvm/versions/node/v20.11.0/bin/node
      Yarn: 4.1.0 - ~/.nvm/versions/node/v20.11.0/bin/yarn
      npm: 10.4.0 - ~/.nvm/versions/node/v20.11.0/bin/npm
    npmPackages:
      @tarojs/cli: 3.6.32 => 3.6.32 
      @tarojs/components: 3.6.32 => 3.6.32 
      @tarojs/helper: 3.6.32 => 3.6.32 
      @tarojs/plugin-framework-vue3: 3.6.32 => 3.6.32 
      @tarojs/plugin-platform-alipay: 3.6.32 => 3.6.32 
      @tarojs/plugin-platform-h5: 3.6.32 => 3.6.32 
      @tarojs/plugin-platform-jd: 3.6.32 => 3.6.32 
      @tarojs/plugin-platform-qq: 3.6.32 => 3.6.32 
      @tarojs/plugin-platform-swan: 3.6.32 => 3.6.32 
      @tarojs/plugin-platform-tt: 3.6.32 => 3.6.32 
      @tarojs/plugin-platform-weapp: 3.6.32 => 3.6.32 
      @tarojs/runtime: 3.6.32 => 3.6.32 
      @tarojs/shared: 3.6.32 => 3.6.32 
      @tarojs/taro: 3.6.32 => 3.6.32 
      @tarojs/taro-loader: 3.6.32 => 3.6.32 
      @tarojs/webpack5-runner: 3.6.32 => 3.6.32 
      babel-preset-taro: 3.6.32 => 3.6.32 
      eslint-config-taro: 3.6.32 => 3.6.32 

---

补充信息

临时解决方案，可将嵌套的元素结构抽离成一个单独的组件

[ilk-1]

同样版本我也遇到的这个问题，但是我排查后发现与class相关 这种情况表现正常

<template>
  <view>
    <swiper>
      <swiper-item>
        <view>1
          <view>4</view>
        </view>
      </swiper-item>
      <swiper-item>
        <view>2
          <view>5</view>
        </view>
      </swiper-item>
      <swiper-item>
        <view>3</view>
      </swiper-item>
    </swiper>
  </view>
</template>

<style>
.demo-swiper {
  width: 100%;
  height: 30vh;
}
</style>

但是如果我给前几个添加了CLASS

<template>
  <view>
    <swiper>
      <swiper-item>
        <view class="1">1
          <view class="4">4</view>
        </view>
      </swiper-item>
      <swiper-item>
        <view class="2">2
          <view class="5">5</view>
        </view>
      </swiper-item>
      <swiper-item>
        <view class="3">3</view>
      </swiper-item>
    </swiper>
  </view>
</template>

<style>
.demo-swiper {
  width: 100%;
  height: 30vh;
}
</style>

微信小程序会产生报错

[new1333]

请问解决了吗？ 我也出现了 小程序环境下编译出来的元素多出了 h5-view 这种class， 然后样式不生效

[ilk-1]

没，直接找 UI 换结构了