- 发布：2023-08-01 15:43
- 更新：2023-08-01 15:48
- 阅读：249
产品分类： uniapp/App
PC开发环境操作系统： Mac
PC开发环境操作系统版本号： 12.6.8 (21G725)
HBuilderX类型： 正式
HBuilderX版本号： 3.8.7
手机系统： 全部
手机厂商： 华为
页面类型： nvue
vue版本： vue2
打包方式： 云端
项目创建方式： HBuilderX
测试过的手机：
示例代码：
<view class="bottom-swiper">
<view class="bottom-swiper-c">
<swiper class="bottom-swiper-c" :indicator-dots="true" :autoplay="true" :interval="2500">
<swiper-item class="bottom-swiper-c" v-for="(item,index) in bannerList" :key="index">
<image :src="item.imageUrl" mode=""></image>
</swiper-item>
</swiper>
</view>
</view>
<view class="bottom-swiper">
<view class="bottom-swiper-c">
<swiper class="bottom-swiper-c" :indicator-dots="true" :autoplay="true" :interval="2500">
<swiper-item class="bottom-swiper-c" v-for="(item,index) in bannerList" :key="index">
<image :src="item.imageUrl" mode=""></image>
</swiper-item>
</swiper>
</view>
</view>操作步骤：
<view class="bottom-swiper">
<view class="bottom-swiper-c">
<swiper class="bottom-swiper-c" :indicator-dots="true" :autoplay="true" :interval="2500">
<swiper-item class="bottom-swiper-c" v-for="(item,index) in bannerList" :key="index">
<image :src="item.imageUrl" mode=""></image>
</swiper-item>
</swiper>
</view>
</view>
<view class="bottom-swiper">
<view class="bottom-swiper-c">
<swiper class="bottom-swiper-c" :indicator-dots="true" :autoplay="true" :interval="2500">
<swiper-item class="bottom-swiper-c" v-for="(item,index) in bannerList" :key="index">
<image :src="item.imageUrl" mode=""></image>
</swiper-item>
</swiper>
</view>
</view>预期结果：
<view class="bottom-swiper">
<view class="bottom-swiper-c">
<swiper class="bottom-swiper-c" :indicator-dots="true" :autoplay="true" :interval="2500">
<swiper-item class="bottom-swiper-c" v-for="(item,index) in bannerList" :key="index">
<image :src="item.imageUrl" mode=""></image>
</swiper-item>
</swiper>
</view>
</view>
<view class="bottom-swiper">
<view class="bottom-swiper-c">
<swiper class="bottom-swiper-c" :indicator-dots="true" :autoplay="true" :interval="2500">
<swiper-item class="bottom-swiper-c" v-for="(item,index) in bannerList" :key="index">
<image :src="item.imageUrl" mode=""></image>
</swiper-item>
</swiper>
</view>
</view>实际结果：
<view class="bottom-swiper">
<view class="bottom-swiper-c">
<swiper class="bottom-swiper-c" :indicator-dots="true" :autoplay="true" :interval="2500">
<swiper-item class="bottom-swiper-c" v-for="(item,index) in bannerList" :key="index">
<image :src="item.imageUrl" mode=""></image>
</swiper-item>
</swiper>
</view>
</view>
<view class="bottom-swiper">
<view class="bottom-swiper-c">
<swiper class="bottom-swiper-c" :indicator-dots="true" :autoplay="true" :interval="2500">
<swiper-item class="bottom-swiper-c" v-for="(item,index) in bannerList" :key="index">
<image :src="item.imageUrl" mode=""></image>
</swiper-item>
</swiper>
</view>
</view>bug描述：
在nvue页面中使用swiper直接不生效
这样只显示了里面的图片但是不能轮播，手动滚动也不行
Diligent_UI - 【插件开发】【专治疑难杂症】【多款插件已上架：https://ext.dcloud.net.cn/publisher?id=193663(微信搜索飘逸科技UI小程序直接体验)】【骗子请绕道】问题咨询请加QQ群：120594820，代表作灵感实用工具小程序
nvue有部分限制，需要仔细看看文档，例如样式就有很多不支持
省钱兄 (作者)
不是样式问题 是整个swiper不生效，但是在安卓手机上正常
2023-08-01 16:09
Diligent_UI
回复 省钱兄: 哪里不正常
2023-08-01 16:13
省钱兄 (作者)
回复 Diligent_UI: 你看清我的问题了吗？ 是直接swiper不生效，没有轮播效果 只显示了里面的图片
2023-08-01 16:19
Diligent_UI
回复 省钱兄: 不是样式问题 是整个swiper不生效，但是在安卓手机上正常，什么平台不正常？
2023-08-01 16:27
省钱兄 (作者)
回复 Diligent_UI: 鸿蒙系统 3.0
2023-08-01 16:49