uniapp vue3 swiper如何使用

在uniapp中使用vue3开发时，swiper组件应该如何配置？我在引入swiper后无法正常滑动显示，尝试了官方文档的写法但总是报错。请问正确的引入方式是什么？需要额外安装依赖吗？能否提供一个完整的swiper使用示例代码，包括基本配置和常见参数设置？

2 回复

在uniapp Vue3中，使用swiper组件：

<template>
  <swiper :indicator-dots="true" :autoplay="true">
    <swiper-item v-for="item in list" :key="item.id">
      <image :src="item.img" mode="aspectFill"></image>
    </swiper-item>
  </swiper>
</template>

<script setup>
const list = ref([
  {id: 1, img: '/static/1.jpg'},
  {id: 2, img: '/static/2.jpg'}
])
</script>

主要属性：

  • indicator-dots：显示指示点
  • autoplay：自动播放
  • circular：循环播放
  • interval：切换间隔

在 UniApp 中使用 Vue 3 和 Swiper 组件时，可以通过以下步骤实现轮播图功能。UniApp 内置了 swiper 组件，无需额外安装，直接使用即可。

基本用法

  1. 引入 swiper 组件：在模板中使用 <swiper> 标签。
  2. 配置属性：设置 indicator-dots（指示点）、autoplay（自动播放）等属性。
  3. 绑定数据：通过 v-for 动态渲染轮播项。

示例代码

以下是一个完整的 Vue 3 组合式 API 示例：

<template>
  <view>
    <swiper
      :indicator-dots="true"
      :autoplay="true"
      :interval="3000"
      :duration="500"
      circular
    >
      <swiper-item v-for="(item, index) in swiperList" :key="index">
        <view class="swiper-item">
          <image :src="item.image" mode="aspectFill" />
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script setup>
import { ref } from 'vue';

// 轮播图数据
const swiperList = ref([
  { image: '/static/image1.jpg' },
  { image: '/static/image2.jpg' },
  { image: '/static/image3.jpg' }
]);
</script>

<style scoped>
.swiper-item {
  width: 100%;
  height: 300rpx;
}
image {
  width: 100%;
  height: 100%;
}
</style>

关键属性说明

  • indicator-dots：是否显示指示点（默认 false）。
  • autoplay：是否自动播放（默认 false）。
  • interval：自动播放间隔（毫秒，默认 5000）。
  • duration：滑动动画时长（毫秒，默认 500）。
  • circular：是否循环播放（默认 false）。

注意事项

  • 确保图片路径正确，建议使用绝对路径（如 /static/ 目录）。
  • 可通过样式调整轮播图高度和布局。
  • 如果需要自定义指示点或添加事件，可使用 @change 事件监听切换。

如果需要更复杂功能（如自定义指示点），可结合 CSS 和事件处理实现。

回到顶部