Swiper 轮播

使用指南

用于进行滑动切换场景，例如轮播图片或者tab内容。

代码演示

查看代码

<template>
  <div class="list">
    <p>基本使用</p>
    <h3-swiper v-model="swiperIndex">
      <h3-swiper-item v-for="(item, index) in imgList" :key="index" class="h3-swiper-demo-img">
        <img :src="item" />
      </h3-swiper-item>
    </h3-swiper>

    <p>当前 index: {{ swiperIndex }}</p>
    <h3-button
      @click="swiperIndex = 0"
      inline
      type="primary"
      style="margin: 10px 10px;"
    >
      0
    </h3-button>
    <h3-button
      @click="swiperIndex = 1"
      inline
      type="primary"
      style="margin: 10px 10px;"
    >
      1
    </h3-button>
    <h3-button
      @click="swiperIndex = 2"
      inline
      type="primary"
      style="margin: 10px 10px;"
    >
      2
    </h3-button>
    <p>通过name 切换</p>
    <h3-swiper v-model="swiperName">
      <h3-swiper-item
        v-for="(item, index) in imgList"
        :key="index"
        :name="`item-${index}`"
        class="h3-swiper-demo-img"
      >
        <img :src="item" />
      </h3-swiper-item>
    </h3-swiper>

    <p>当前 item name: {{ swiperName }}</p>
    <h3-button
      @click="swiperName = 'item-0'"
      inline
      type="primary"
      style="margin: 10px 10px;"
    >
      item-0
    </h3-button>
    <h3-button
      @click="swiperName = 'item-1'"
      inline
      type="primary"
      style="margin: 10px 10px;"
    >
      item-1
    </h3-button>
    <h3-button
      @click="swiperName = 'item-2'"
      inline
      type="primary"
      style="margin: 10px 10px;"
    >
      item-2
    </h3-button>

    <br />
    <br />

    <p>自定义 swiper-item宽度 (不支持loop)</p>
    <h3-swiper :itemWidth="itemWidth">
      <h3-swiper-item v-for="(item, index) in imgList" :key="index" class="h3-swiper-demo-img">
        <img :src="item" />
      </h3-swiper-item>
    </h3-swiper>
    <br />
    <p>自定义 swiper-item宽度 (不支持loop) 不居中</p>
    <h3-swiper :itemWidth="itemWidth" :center="false">
      <h3-swiper-item v-for="(item, index) in imgList" :key="index" class="h3-swiper-demo-img">
        <img :src="item" />
      </h3-swiper-item>
    </h3-swiper>
    <br />
    <br />
    <p>循环</p>
    <h3-swiper loop>
      <h3-swiper-item v-for="(item, index) in imgList" :key="index" class="h3-swiper-demo-img">
        <img :src="item" />
      </h3-swiper-item>
    </h3-swiper>
    <br />
    <br />
    <p>自动轮播</p>
    <h3-swiper auto>
      <h3-swiper-item v-for="(item, index) in imgList" :key="index" class="h3-swiper-demo-img">
        <img :src="item" />
      </h3-swiper-item>
    </h3-swiper>
    <br />
    <br />
    <p>自动轮播 循环</p>
    <h3-swiper loop auto>
      <h3-swiper-item v-for="(item, index) in imgList" :key="index" class="h3-swiper-demo-img">
        <img :src="item" />
      </h3-swiper-item>
    </h3-swiper>
    <br />
    <br />
    <p>垂直方向滚动 需要通过css样式给 h3-swiper 设置高度</p>
    <h3-swiper style="height: 200px;" direction="vertical" loop>
      <h3-swiper-item v-for="(item, index) in imgList" :key="index" class="h3-swiper-demo-img">
        <img :src="item" style="height: 100%" />
      </h3-swiper-item>
    </h3-swiper>
    <br />
    <br />
    <p>水平方向文字滚动</p>
    <h3-swiper
      :touchable="false"
      auto
      loop
      class="text-scroll"
    >
      <h3-swiper-item><span>1. 义务爱了 完成传奇世界H5-王者归来任务 获得20金币</span></h3-swiper-item>
      <h3-swiper-item><span>2. 基本世神 兑换《传奇世界H5》畅玩级礼包 消耗30金币</span></h3-swiper-item>
      <h3-swiper-item><span>3. 零哥章魚 完成传奇世界H5-王者归来任务 获得30金币</span></h3-swiper-item>
      <h3-swiper-item><span>4. 做迎而為 兑换【饿了么】畅享美食红包 消耗20金币</span></h3-swiper-item>
      <h3-swiper-item><span>5. 只知道不知道 兑换【饿了么】畅享美食红包 消耗20金币</span></h3-swiper-item>
      <h3-swiper-item><span>6. 基本世神 兑换《传奇世界H5》畅玩级礼包 消耗30金币</span></h3-swiper-item>
    </h3-swiper>
    <p>垂直方向文字滚动</p>
    <h3-swiper
      :touchable="false"
      auto
      loop
      direction="vertical"
      class="text-scroll"
    >
      <h3-swiper-item><span>1. 义务爱了 完成传奇世界H5-王者归来任务 获得20金币</span></h3-swiper-item>
      <h3-swiper-item><span>2. 基本世神 兑换《传奇世界H5》畅玩级礼包 消耗30金币</span></h3-swiper-item>
      <h3-swiper-item><span>3. 零哥章魚 完成传奇世界H5-王者归来任务 获得30金币</span></h3-swiper-item>
      <h3-swiper-item><span>4. 做迎而為 兑换【饿了么】畅享美食红包 消耗20金币</span></h3-swiper-item>
      <h3-swiper-item><span>5. 只知道不知道 兑换【饿了么】畅享美食红包 消耗20金币</span></h3-swiper-item>
      <h3-swiper-item><span>6. 基本世神 兑换《传奇世界H5》畅玩级礼包 消耗30金币</span></h3-swiper-item>
    </h3-swiper>
    <br />
    <br />
    <p>动态设置数据</p>
    <h3-swiper auto loop>
      <h3-swiper-item v-for="(item, index) in asyncList" :key="index" class="h3-swiper-demo-img">
        <img :src="item" style="height: 100%" />
      </h3-swiper-item>
    </h3-swiper>
    <h3-button
      @click="asyncList = baseList"
      inline
      type="primary"
      style="margin: 10px 10px;"
    >
      Load list1
    </h3-button>
    <h3-button
      @click="asyncList = imgList"
      inline
      type="primary"
      style="margin: 10px 10px;"
    >
      Load list2
    </h3-button>

    <br />
    <br />
  </div>
</template>

<script>
import { H3Swiper, H3SwiperItem } from '@/components/h3-swiper';
import H3Button from '@/components/h3-button/';

const baseList = [
  'https://picsum.photos/id/51/400/200',
  'https://picsum.photos/id/52/400/200',
  'https://picsum.photos/id/53/400/200',
];
const imgList = [
  'https://picsum.photos/id/55/400/200',
  'https://picsum.photos/id/56/400/200',
  'https://picsum.photos/id/57/400/200',
];

export default {
  name: 'SwiperDemo',
  components: {
    H3Swiper,
    H3SwiperItem,
    H3Button,
  },
  data () {
    return {
      baseList,
      imgList,
      asyncList: imgList,
      swiperIndex: 0,
      swiperName: 'item-0',
      itemWidth: 100,
    };
  },
  mounted () {
    this.itemWidth = window.innerWidth * 0.8;
  },
  methods: {},
};
</script>

<style lang="less" scoped>
.list {
  background-color: #fff;
  p {
    font-weight: 600;
    font-size: 16px;
    padding: 15px;
  }
  img {
    width: 100%;
    pointer-events: none;
  }
  .text-scroll {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    height: 30px;
    span {
      font-size: 12px;
      text-align: center;
      line-height: 30px;
    }
  }
}
</style>

与h3-mobile-vue组件的区别以及迁移

旧组件库轮播存在内置图片处理，为了让swiper组件更加纯粹，因此弃用内置图片处理及内置分页器。

若要做迁移请参考

1. 弃用的props：list dotsPosition showDots showDescMask height aspectRatio mode

2. 替换的props：

   • value => index
   • maxLength => maxlength
   • editable => readonly

3. 新增的props：wait border password

4. 弃用原来所有的事件

API - H3Swiper

Props - H3Swiper

参数	说明	类型	默认值
index	当前显示的 swipeItem 索引 或 item的 name，v-model绑定值	string|number	0
direction	轮播方向 vertical horizontal	string	horizontal
auto	是否自动	boolean	false
loop	是否循环播放	boolean	false
interval	轮播间隔时间，单位 ms	string|number	3000
threshold	滑动的临界值	string|number	0
duration	动画持续时间，单位 ms	string|number	300
itemWidth	设置swiper-item宽度，当direction=horizontal时有效，若设置了，请把loop设置为false	string|number	-
itemHeight	设置swiper-item高度，当direction=vertical时有效，若设置了，请把loop设置为false	string|number	-
center	当设置了item-width item-height 时 是否居中显示	boolean	true
touchable	是否可手动滑动	boolean	true

Events - H3Swiper

事件名	说明	参数
input	swipeItem 索引变化时触发，v-model绑定事件	value： 当前索引
change	swipeItem 索引变化时触发	options: {curr： 当前索引, prev: 前一个索引(若为-1则无前一个), next: 后一个索引(若为-1则无后一个), count: 总数}

Function - H3Swiper

• 实例方法

方法名	说明	参数
prev	滑动到前一个	-
next	滑动到后一个	-
swipeTo	滑动到指定一个	index
refresh	刷新组件	-

API - H3SwiperItem

Props - H3SwiperItem

参数	说明	类型	默认值
name	item名称，作为匹配的标识符	string	-