uni-app 新建uni-ui项目无法使用swiper组件

uni-app 新建uni-ui项目无法使用swiper组件

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

产品分类：uniapp/H5

浏览器平台：Chrome
浏览器版本：Chrome 78.0.3904.96
App下载地址或H5网址：http://www.xixidog.top/swiper/

示例代码：

<swiper class="swiper" style="width: 100%;height: 100px;">
<swiper-item>
<view class="swiper-item" style="background-color: red;width: 100%;height: 100px;">A</view>
</swiper-item>
<swiper-item>
<view class="swiper-item " style="background-color: green;width: 100%;height: 100px;">B</view>
</swiper-item>
<swiper-item>
<view class="swiper-item " style="background-color: yellow;width: 100%;height: 100px;">C</view>
</swiper-item>
</swiper>

更多关于uni-app 新建uni-ui项目无法使用swiper组件的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

本地调试和部分浏览器可正常，目前发现谷歌浏览器和微信内置浏览器无法显示


更多关于uni-app 新建uni-ui项目无法使用swiper组件的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在旧版是否正常？ 用示例代码hello uni-app能出现你的问题吗？

选用vue2.0版本没有上面的问题。没有进行hello示列尝试。

是的，vue3里面不能用，太坑了，着急啊，赶紧解决

根据你提供的信息，问题很可能在于没有正确引入和配置 uni-ui 的 swiper 组件。

在 uni-app 项目中，<swiper> 是内置组件，可以直接使用。但根据你的描述“新建uni-ui项目”，推测你可能使用了 uni-ui 项目模板，该模板默认依赖并使用了 uni-ui 的扩展组件库。而 uni-ui 提供了自己功能更强的 uni-swiper 组件，这可能导致内置的 swiper 在某些配置下未被正确编译或存在冲突。

核心解决方案：

  1. 检查并确保正确使用组件：
    • 如果你使用的是内置的 swiper，代码本身没有问题。请确保在 pages.json 中对应页面的 style 里没有设置 "usingComponents": true 且未全局引入 uni-ui。内置组件无需声明。
    • 如果你希望使用 uni-ui 的 uni-swiper，则需要： a. 安装 uni-ui：如果创建项目时未自动安装，请在项目根目录执行 npm install @dcloudio/uni-ui。 b. 在页面中引入组件：在 <script> 标签内或 pages.json 的对应页面配置中注册组件。
      // 在页面 .vue 文件的 <script> 部分
import uniSwiper from '@dcloudio/uni-ui/lib/uni-swiper/uni-swiper.vue'
export default {
    components: { uniSwiper }
}
      c. 在模板中使用 uni-swiper：
      <uni-swiper>
    <!-- swiper-item 内容 -->
</uni-swiper>
回到顶部