Swipe 轮播图

引入

import { Swipe, SwipeItem } from 'vant';

Vue.use(Swipe);
Vue.use(SwipeItem);

基本使用

• autoplay:设置自动滑动时间
• indicator-color：指示器颜色
• height：容器高度

<van-swipe class="my-swipe" :height="200" :autoplay="3000" indicator-color="white">
      <van-swipe-item>图片1</van-swipe-item>
      <van-swipe-item>图片2</van-swipe-item>
      <van-swipe-item>图片3</van-swipe-item>
      <van-swipe-item>图片4</van-swipe-item>
    </van-swipe>

<style>
  .my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
</style>

实现滑块中的图片懒加载

import { Lazyload } from 'vant';

Vue.use(Lazyload);

图片懒加载使用

<van-swipe :autoplay="3000">
  <van-swipe-item v-for="(image, index) in images" :key="index">
    <img v-lazy="image" />
  </van-swipe-item>
</van-swipe>

data() {
    return {
      images: [
        'https://img01.yzcdn.cn/vant/apple-1.jpg',
        'https://img01.yzcdn.cn/vant/apple-2.jpg',
      ],
    };
  },

添加指示器

通过 indicator 插槽可以自定义指示器的样式。

 <van-swipe
      :height="200"
      @change="onChange"
      class="my-swipe"
      :autoplay="3000"
      indicator-color="white"
    >
      <van-swipe-item>1</van-swipe-item>
      <van-swipe-item>2</van-swipe-item>
      <van-swipe-item>3</van-swipe-item>
      <van-swipe-item>4</van-swipe-item>
      <!-- 定义指示器 -->
      <template #indicator>
        <div class="custom-indicator">{{ current + 1 }}/4</div>
      </template>
    </van-swipe>

 data() {
    return {
      current: 0,
    };

//监听滑动并获取当前索引，以更新指示器。
onChange(index) {
        this.current = index;
    },
  },

<style>
  .custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.1);
  }
</style>