轮播组件--卡片模式

1、背景

为了实现卡片滑动的时候，后一张卡片会出现一个边边提示后面还有内容，看起来不是像广告一样

2、现有的组件

现有的vant组件库不能直接满足需求，寻找二次开发的组件vant-green

按照官网提示的方式引入

2.1 安装

通过 npm 安装

npm i vant-green@1.0.0 -S

• 尝试后发现，最新版本的1.0.44不能够支持，更换成1.0.0版本的能够支持，vant组件库的版本在2.13.0之上

2.2 按需引入使用

前提是需要先引入vant组件样式

<template>
  <div class="test-swp">
    <van-swipe type="card" :height="156" :loop="false">
      <van-swipe-item v-for="image in images" :key="image">
        <img :src="image" />
      </van-swipe-item>
    </van-swipe>
  </div>
</template>
<script>
import { Swipe as VanSwipe, SwipeItem as VanSwipeItem } from 'vant-green'

export default {
  name: 'Demo',
  components: {
    VanSwipe,
    VanSwipeItem,
  },
  data() {
    return {
      images: ['http://mui.ucmed.cn/images/default/swipe1@2x.png', 'http://mui.ucmed.cn/images/default/swipe1@2x.png', 'http://mui.ucmed.cn/images/default/swipe1@2x.png', 'http://mui.ucmed.cn/images/default/swipe1@2x.png'],
    }
  },
  methods: {},
}
</script>
<style scoped>
@import 'vant-green/lib/swipe';
@import 'vant-green/lib/swipe-item';
</style>