uni-app重大bug：vue3中nvue的swiper写在自定义组件中宽高等样式无效，急！在2.0版本中是好的

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

uni-app重大bug：vue3中nvue的swiper写在自定义组件中宽高等样式无效，急！在2.0版本中是好的

测试过的手机：

  • 华为mate20pro
  • 苹果15plus

操作步骤：

  • 必现

预期结果：

  • 可以在子组件中修改swiper 的宽高

实际结果：

  • 不能

bug描述：

迁移3.0后 发现 swiper在nvue中的子组件中样式都无效 不在子组件写是可以的 但是子组件里面写高度宽度和颜色都失效了 vue2.0是好的 下图红色的是vue中子组件设置的swiper 是好的 但是在nvue中的属性都不生效

信息类别 信息内容
产品分类 uniapp/App
PC开发环境 Mac
PC开发环境版本 14.4
HBuilderX类型 正式
HBuilderX版本 4.24
手机系统 全部
页面类型 nvue
Vue版本 vue3
打包方式 云端
项目创建方式 HBuilderX

download


Harmonyos Next教程
4 回复

还有在ios模拟器中 不能热更新


vue2.0都是你可以的 迁移到3.0发现不行了

测试demo在附件

针对你提到的uni-app在Vue 3中nvue的swiper组件在自定义组件中宽高等样式无效的问题，这确实是一个值得关注的兼容性问题。在uni-app从2.0升级到3.0的过程中，由于框架底层的一些调整，可能会导致一些组件的行为发生变化。

在nvue（即Weex）环境中，组件的样式处理与Vue页面（H5环境）有所不同，尤其是当组件嵌套在自定义组件中时。以下是一个简化的代码示例，展示如何在nvue自定义组件中正确使用swiper组件，并确保其样式生效。

自定义组件（MySwiper.nvue）

<template>
  <swiper
    class="swiper-container"
    :indicator-dots="true"
    :autoplay="true"
    interval="3000"
    duration="500"
  >
    <swiper-item v-for="(item, index) in items" :key="index">
      <image :src="item.image" class="swiper-image"></image>
    </swiper-item>
  </swiper>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { image: 'path/to/image1.jpg' },
        { image: 'path/to/image2.jpg' },
        { image: 'path/to/image3.jpg' }
      ]
    };
  }
};
</script>

<style>
.swiper-container {
  width: 100%;
  height: 300px; /* 设置固定高度 */
}
.swiper-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>

使用自定义组件的页面（Page.nvue）

<template>
  <div class="container">
    <MySwiper />
  </div>
</template>

<script>
import MySwiper from '@/components/MySwiper.nvue';

export default {
  components: {
    MySwiper
  }
};
</script>

<style>
.container {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

注意事项

  1. 确保nvue环境：上述代码示例适用于nvue环境，不适用于普通的Vue页面（.vue文件）。
  2. 样式单位：在nvue中，推荐使用px作为长度单位，因为Weex对rem、vw等单位的支持可能不如预期。
  3. 调试与测试：在实际项目中，建议在不同设备和屏幕尺寸上进行充分测试，以确保swiper组件的样式和行为符合预期。

如果上述方法仍然无法解决问题，建议查阅uni-app的官方文档或社区论坛，看看是否有其他开发者遇到并解决了类似的问题。同时，也可以考虑向uni-app的官方团队反馈此bug。

回到顶部