uni-app 封装 swiper-item 导入有组件但不渲染

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

uni-app 封装 swiper-item 导入有组件但不渲染

开发环境 版本号 项目创建方式
Windows 10 HBuilderX
HBuilderX 4.29

操作步骤：

  • 运行项目

预期结果：

  • 显示swiper内容

实际结果：

  • 白屏 .uni-swiper-slide-frame 内没有内容

bug描述：

代码在附件中, 最小化复现. 想封装swiper 和 scroll-view 做上下滚动. 但是 l-fullpage-item 死活渲染不了, import时却存在. 不知道哪里做的不对. 希望大佬们能一起看看 但是不用 l-fullpage-item 直接用 swiper-item 就有内容, 很奇怪

最小问题复现.zip


Harmonyos Next教程
3 回复

swiper必须和swiper-item搭配使用，不可以跨组件使用，否则在编译时可能会编译不到一起。


vue3似乎又没有这种问题 只有vue2存在这个问题

在uni-app中，如果你遇到swiper-item内导入组件但不渲染的问题，这通常是由于组件的注册、使用方式或数据绑定不正确引起的。下面我将提供一个封装swiper-item并导入组件的基本示例，以及确保组件正确渲染的关键点。

1. 组件封装与导入

首先，我们创建一个简单的子组件，比如MyComponent.vue：

<template>
  <view class="my-component">
    <text>{{ message }}</text>
  </view>
</template>

<script>
export default {
  name: 'MyComponent',
  props: {
    message: {
      type: String,
      default: 'Hello from MyComponent!'
    }
  }
}
</script>

<style scoped>
.my-component {
  text-align: center;
  padding: 20px;
}
</style>

2. 在父组件中使用swiper和swiper-item

接下来，在父组件中导入并使用swiper和swiper-item，同时将MyComponent作为swiper-item的内容：

<template>
  <view>
    <swiper autoplay="3000" interval="3000" indicator-dots="true">
      <swiper-item v-for="(item, index) in items" :key="index">
        <MyComponent :message="item.message" />
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
import MyComponent from '@/components/MyComponent.vue';

export default {
  components: {
    MyComponent
  },
  data() {
    return {
      items: [
        { message: 'Slide 1' },
        { message: 'Slide 2' },
        { message: 'Slide 3' }
      ]
    };
  }
}
</script>

<style>
/* 样式根据需要调整 */
</style>

3. 确保组件正确渲染的关键点

  • 组件注册：确保子组件MyComponent已在父组件中正确注册。
  • 数据绑定：检查swiper-item内的组件是否通过正确的属性绑定了数据。
  • 样式问题：有时候组件没有渲染可能是因为样式问题（如display: none），检查组件及其父容器的样式。
  • 控制台日志：查看浏览器的开发者工具控制台，检查是否有任何错误或警告信息。
  • 组件生命周期：理解组件的生命周期，确保在组件挂载（mounted）时数据已正确加载。

通过上述代码示例和关键点检查，你应该能够解决swiper-item内组件不渲染的问题。如果问题依旧存在，可能需要进一步检查具体的项目配置或代码实现细节。

回到顶部