Swiper 轮播图

使用指南

组件介绍

本组件为轮播图组件，支持展示指示器，如果组件自带的指示器样式并不满足你的要求，那么组件也提供了相应的 slot 插槽以便你能自定义展示你想要的指示器。另外，值得注意的是，本组件使用时需要结合 fe-swiper-item 使用。

引入方式

import { Swiper,SwiperItem } from "feart";

components:{
  'fe-swiper':Swiper,
  'fe-swiper-item':SwiperItem
}

代码演示

基本用法

• 自动轮播
• 可通过手势滑动
• 单次轮播时长 500ms

<fe-swiper :height="200" :autoplay="2000" :show-indicators="true">
  <fe-swiper-item v-for="list in dataList" :key="list.text">
    <img :src="list.img" class="list-img" />
  </fe-swiper-item>
</fe-swiper>

不自动轮播

<fe-swiper :show-indicators="true" :height="250">
  <fe-swiper-item v-for="list in images" :key="list">
    <img :src="list" class="list-img" />
  </fe-swiper-item>
</fe-swiper>

默认展示第二张(下标为 1)图片

<fe-swiper :show-indicators="true" :height="250" :initial-index="1">
  <fe-swiper-item v-for="list in images" :key="list">
    <img :src="list" class="list-img" />
  </fe-swiper-item>
</fe-swiper>

禁用手势滑动

<fe-swiper :height="150" :show-indicators="true" :touchable="false">
  <fe-swiper-item v-for="list in images" :key="list">
    <img :src="list" class="list-img" />
  </fe-swiper-item>
</fe-swiper>

自定义的指示器样式

<fe-swiper :show-indicators="false" v-model="curIndex" :height="200">
  <fe-swiper-item v-for="list in images" :key="list">
    <img :src="list" class="list-img" />
  </fe-swiper-item>
  <div slot="indicators" class="customize-indicators">
    <span :class="{ active: curIndex === index }" v-for="(list, index) in images" :key="list"
      >{{ index + 1 }}</span
    >
  </div>
</fe-swiper>

export default { data() { return { dataList: [ {other: any,imgPath: url}, {other: any,imgPath: url}
], curIndex:0 } } }

点击轮播图

<fe-swiper :data-list="images" :show-indicators="true" @click="handleSwiperClick" :height="200">
  <fe-swiper-item v-for="list in images" :key="list">
    <img :src="list" class="list-img" />
  </fe-swiper-item>
</fe-swiper>

export default {
  data() {
    return {
      dataList: [
        { other: any, imgPath: url },
        { other: any, imgPath: url },
      ],
    };
  },
  mounted() {},
  methods: {
    handleSwiperClick(index) {
      alert(`你点击了第${index + 1}张图片`);
    },
  },
};

API

Events

Slots

双向绑定

通过 v-model 实时获得组件轮播的当前下标