后台和小程序实现卡片式轮播图

营销活动中，轮播图效果是比较常见的，基于轮播图拓展的组件也很多，这里记录一下使用swiper实现卡片式轮播的过程，分为PC端和小程序端，其中PC端是Vue+typescript，小程序端是uni-app。
使用场景为管理后台配置相关参数实现预览效果，小程序根据配置实现相应效果。

vue卡片式轮播

前期

后台中使用了vue-awesome-swiper，安装依赖。

yarn add swiper vue-awesome-swiper
# or
npm install swiper vue-awesome-swiper -S

vue-awesome-swiper参考文档：vue-awesome-swiper
swiper的参考文档：swiper中文网
vue-awesome-swiper中的属性和配置基本同swiper，注意swiper3和swiper≥3区别有点大，具体以安装版本为主。

使用

1. 导入组件

import {
    Swiper, SwiperSlide } from 'vue-awesome-swiper'
@Component({
   
  components: {
   
    Swiper,
    SwiperSlide
  }
})

2. template基本结构

<Swiper
   ref="myswiper"
   :options="option_swiper"
   class="swiper"
   @slideChange="slideChange"
 >
   <SwiperSlide
     v-for="(item, index) in images"
     :key="index"
   >
     <img
       :class="bem('image')"
       :src="item.ImageUrl"
     >
   </SwiperSlide>
   <div
     slot="pagination"
     class="swiper-pagination swiper-pagination-white"
   />
 </Swiper>

3. 源数据

// 图片数据
@Prop({
   
	default() {