uni-app nvue中swiper在子组件里宽高不生效 bug报告 vue3中出现问题 vue2.0及在page里面写宽高正常

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

uni-app nvue中swiper在子组件里宽高不生效 bug报告 vue3中出现问题 vue2.0及在page里面写宽高正常

项目信息 详细信息
产品分类 uniapp/App
PC开发环境操作系统 Mac
PC开发环境操作系统版本号 14.4
HBuilderX类型 正式
HBuilderX版本号 4.24
手机系统 全部
手机厂商 华为
页面类型 nvue
vue版本 vue3
打包方式 云端
项目创建方式 HBuilderX

测试过的手机：

  • 华为mate20pro
  • 苹果15plus

操作步骤：

  • 在子组件里面写宽高样式无效 总是定值

预期结果：

  • 可以改变宽高

实际结果：

  • 不能

bug描述：

  • 迁移到vue3.0中 ，发现 nvue中swiper在子组件里面写宽高不生效 总是定值 在vue2.0和page里面写是可以的 demo在附件

附件


Harmonyos Next教程
7 回复

你好，可以详细说一下，你代码的区别是什么吗？在哪里不生效？


代码一模一样的 但是在vue中和nvue中显示不一样 vue3.0中在子组件使用swiper 然后在vue和nvue界面中使用 但是在nvue中swiper的高度永远是定值 上图红色是swiper 这个只在vue3.0中且是子组件且nvue才有 vue2.0中都是好的

回复 海角: 我们会检查是什么原因导致的，暂时你把高度设置为swiper的高度可以满足你的需求吗？

回复 DCloud_UNI_yuhe: 现在swiper 不论设置多大的高度 都无效 class写的样式无效 我发现了一个解决办法 就是class写的属性都无效 但是:style="{‘height’；’80rpx}"这种就可以了

回复 海角: 好的，感谢反馈

我去，我以为是我的问题，果然换vue2就可以改变高度了，

在 uni-app 中使用 nvue 页面时，确实可能会遇到一些组件样式不生效的问题，尤其是像 swiper 这样的组件在子组件中的宽高设置。这通常是由于 nvue 使用了 Weex 渲染引擎，与 Vue 渲染机制有所不同，导致一些 CSS 样式表现不一致。

以下是一个可能的解决方案，通过代码示例展示如何在 nvue 子组件中正确设置 swiper 的宽高。

父组件 (index.nvue)

<template>
  <div>
    <child-swiper :height="swiperHeight"></child-swiper>
  </div>
</template>

<script>
import ChildSwiper from './components/ChildSwiper.nvue';

export default {
  components: {
    ChildSwiper
  },
  data() {
    return {
      swiperHeight: '300px' // 设置swiper的高度
    };
  }
};
</script>

<style>
/* nvue样式 */
</style>

子组件 (ChildSwiper.nvue)

<template>
  <swiper :style="{height: swiperHeight}">
    <swiper-item v-for="(item, index) in items" :key="index">
      <div class="swiper-content">
        {{ item }}
      </div>
    </swiper-item>
  </swiper>
</template>

<script>
export default {
  props: {
    height: {
      type: String,
      default: '100px' // 默认高度
    }
  },
  computed: {
    swiperHeight() {
      return this.height;
    }
  },
  data() {
    return {
      items: ['Slide 1', 'Slide 2', 'Slide 3']
    };
  }
};
</script>

<style>
.swiper-content {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
}
</style>

注意事项

  1. 样式传递：在 nvue 中，直接通过 style 属性绑定动态样式可能不如 Vue 页面灵活，因此我们通过 props 传递高度值，并在子组件中使用计算属性来接收。

  2. 默认样式：为 swiper 设置一个默认高度，以防父组件未传递高度值导致样式问题。

  3. 使用 nvue 样式：确保在 nvue 页面中使用的是 Weex 支持的样式语法，避免使用 Vue 页面中的某些 CSS 特性。

通过上述方法，我们可以在 nvue 子组件中正确地设置 swiper 的宽高，从而避免样式不生效的问题。如果问题依然存在，建议检查 uni-app 和相关依赖的版本，确保使用的是最新稳定版本。

回到顶部