如何使用uni-swiper

Uni-swiper 是一款基于 Vue.js 和 Hammer.js 的轮播组件库，可以用来实现滑动切换内容的效果。下面是使用 uni-swiper 的基本步骤：

1. 安装 uni-swiper

可以通过 npm 安装 uni-swiper：

npm install uni-swiper --save

2. 引入 uni-swiper

在需要使用 uni-swiper 的页面或组件中引入 uni-swiper：

<template>
  <div>
    <swiper :items="items" :options="options"></swiper>
  </div>
</template>

<script>
import Swiper from "uni-swiper";

export default {
  components: {
    Swiper,
  },
  data() {
    return {
      items: [
        {
          src: "https://picsum.photos/640/300/?image=1000",
        },
        {
          src: "https://picsum.photos/640/300/?image=1001",
        },
        {
          src: "https://picsum.photos/640/300/?image=1002",
        },
      ],
      options: {
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
      },
    };
  },
};
</script>

在上面的代码中，我们通过 `import` 引入了 uni-swiper 组件，然后在 `data` 中定义了 `items` 和 `options`，分别表示轮播项和轮播配置。在模板中，我们使用 `swiper` 组件，并将 `items` 和 `options` 作为属性传递给它。

3. 设置样式

为了让 uni-swiper 生效，我们还需要设置一些样式。可以在页面或组件的样式中添加以下代码：

.swiper-container {
  height: 300px;
}

.swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

在上面的代码中，我们设置了轮播容器的高度为 300px，并且让轮播项的图片充满容器。

以上就是使用 uni-swiper 的基本步骤，你可以根据需要进行自定义配置和样式。