uni-app 组件swiper在nvue下运行于快手小程序时swiper-item出现层叠

uni-app 组件swiper在nvue下运行于快手小程序时swiper-item出现层叠

示例代码：

<template>  
    <view>  
        <swiper autoplay>  
            <swiper-item>  
                <view style="color: antiquewhite;">这个是轮播1</view>  
            </swiper-item>  
            <swiper-item>  
                <view>轮播2</view>  
                <view>轮播2</view>  
            </swiper-item>  
        </swiper>  
    </view>  
</template>

操作步骤：

在nvue文件中，书写如下代码后，编译运行于 快手小程序

<template>  
    <view>  
        <swiper autoplay>  
            <swiper-item>  
                <view style="color: antiquewhite;">这个是轮播1</view>  
            </swiper-item>  
            <swiper-item>  
                <view>轮播2</view>  
                <view>轮播2</view>  
            </swiper-item>  
        </swiper>  
    </view>  
</template>

预期结果：

期望组件正常运行

实际结果：

<swiper>中的<swiper-item> 出现层叠，导致界面显示异常

bug描述：

在nvue文件中，书写swiper组件后，编译运行于快手小程序，swiper-item出现层叠。

而vue文件，swiper无异常

测试图片

测试swiper在nvue下，于快手小程序的不同效果.zip


更多关于uni-app 组件swiper在nvue下运行于快手小程序时swiper-item出现层叠的实战教程也可以访问 https://www.itying.com/category-93-b0.html

8 回复

问题已验证，是 nvue 提供的 css 有一条规则影响了快手平台的 swiper 展示。
你可以尝试针对快手平台添加下面的 css 规则，在你写的 nvue 文件

<style> /* #ifdef MP-KUAISHOU */ swiper-item { position: relative; } /* #endif */ </style>

来绕过该平台的限制，后续我们会评估是否对快手平台进行兼容处理

更多关于uni-app 组件swiper在nvue下运行于快手小程序时swiper-item出现层叠的实战教程也可以访问 https://www.itying.com/category-93-b0.html


试了一下，确实可以

可以帮我看看这个问题吗：https://ask.dcloud.net.cn/question/191141

还是快手和轮播图的问题，帮孩子看看叭T_T：https://ask.dcloud.net.cn/question/191458

回复 菜汤不甜: 好

尝试过 安卓app、h5、微信小程序、抖音小程序，并不会出现swiper-item层叠/堆叠的情况，
这是nvue不支持快手小程序吗？
手头上有个项目，涉及编译多个平台，并且需要覆盖原生组件video，不得已才使用nvue，结果卡在此问题

感谢反馈，而且你也提供了复现 demo，你提到在相同的代码，在 android/ios 微信 抖音上没问题，在快手小程序上有问题，接下来我尝试验证
你也简单对比不同的平台，看是是 css 丢失了，还是编译产物有区别？

在 uni-app 中，使用 swiper 组件在 nvue 环境下运行于快手小程序时，可能会出现 swiper-item 层叠的问题。这通常是由于 nvue 和快手小程序的渲染机制差异导致的。以下是一些可能的解决方案：

1. 检查样式

确保 swiper 和 swiper-item 的样式没有设置 position: absolute 或 position: fixed，这可能会导致层叠问题。尝试将样式调整为：

swiper {
  width: 100%;
  height: 100%;
}

swiper-item {
  width: 100%;
  height: 100%;
}

2. 使用 flex 布局

在 nvue 中，flex 布局是默认的布局方式，确保 swiper 和 swiper-item 使用了正确的 flex 布局：

<swiper style="flex: 1;">
  <swiper-item style="flex: 1;">
    <!-- 内容 -->
  </swiper-item>
  <swiper-item style="flex: 1;">
    <!-- 内容 -->
  </swiper-item>
</swiper>

3. 检查 z-index

如果确实需要层叠效果，可以通过 z-index 来控制层叠顺序。确保 z-index 的值设置合理，避免意外的层叠：

swiper-item {
  z-index: 1;
}

4. 更新 uni-app 版本

确保你使用的是最新版本的 uni-app，因为新版本可能已经修复了类似的问题。可以通过以下命令更新 uni-app：

npm update [@dcloudio](/user/dcloudio)/uni-app
回到顶部