<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>
菜汤不甜
- 发布：2024-05-06 23:39
- 更新：2024-05-07 16:42
- 阅读：259
产品分类： uniapp/小程序
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： Windows 10 专业版
HBuilderX类型： 正式
HBuilderX版本号： 4.14
第三方开发者工具版本号： 1.46.0
基础库版本号： 1.74.1
项目创建方式： HBuilderX
示例代码：
操作步骤：
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>
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> 出现层叠，导致界面显示异常
<swiper>中的<swiper-item> 出现层叠，导致界面显示异常
bug描述：
在nvue文件中，书写swiper组件后，编译运行于快手小程序，swiper-item出现层叠。
而vue文件，swiper无异常
最佳回复
DCloud_UNI_OttoJi - 日常回复 uni-app/x 问题，如果艾特我没看到，请主动私信
问题已验证，是 nvue 提供的 css 有一条规则影响了快手平台的 swiper 展示。
你可以尝试针对快手平台添加下面的 css 规则，在你写的 nvue 文件
<style>
/* #ifdef MP-KUAISHOU */
swiper-item {
position: relative;
}
/* #endif */
</style>来绕过该平台的限制，后续我们会评估是否对快手平台进行兼容处理
菜汤不甜 (作者)
尝试过 安卓app、h5、微信小程序、抖音小程序，并不会出现swiper-item层叠/堆叠的情况，
这是nvue不支持快手小程序吗？
手头上有个项目，涉及编译多个平台，并且需要覆盖原生组件video，不得已才使用nvue，结果卡在此问题
DCloud_UNI_OttoJi - 日常回复 uni-app/x 问题，如果艾特我没看到，请主动私信
感谢反馈，而且你也提供了复现 demo，你提到在相同的代码，在 android/ios 微信 抖音上没问题，在快手小程序上有问题，接下来我尝试验证
你也简单对比不同的平台，看是是 css 丢失了，还是编译产物有区别？
菜汤不甜 (作者)
试了一下，确实可以
2024-05-11 15:04
菜汤不甜 (作者)
可以帮我看看这个问题吗：https://ask.dcloud.net.cn/question/191141
2024-05-14 11:36
菜汤不甜 (作者)
还是快手和轮播图的问题，帮孩子看看叭T_T：https://ask.dcloud.net.cn/question/191458
2024-05-15 17:08
DCloud_UNI_OttoJi
回复 菜汤不甜: 好
2024-05-16 16:25