【在vue2中使用vue-awesome-swiper（4.1.1）】

vue2中使用vue-awesome-swiper（4.1.1）,遇到了哪些坑？

UI效果图

问题一：

要实现的效果： 页面中任务内容，要根据滑动swiper更新相应的内容
实现思路： 通过监听swiper的索引，获取对应的数据，详见下面的代码
所遇问题： 因为this指向问题，在slideChange方法中，this指向的是swiper实例，无法直接调用vue方法
解决方案： 通过箭头函数来改变this指向，使其指向vue实例，再通过$refs获取对应的swiper对象，具体见如下代码

// view部分
<div class="swipe-box">
    <swiper ref="mySwiper" :options="swiperOptions">
         <swiper-slide v-for='(item, index) in swiperList' :key='index'>
             <img :src="item.cardLevelUrl" alt="">
             <span v-if="item.isCurrentLevel === 1"
                     class="get-id-date current-level">当前等级</span>
             <span class="get-id-date">{{item.cardDesc}}</span>
         </swiper-slide>
     </swiper>
 </div>
// data部分
 swiperOptions: {
     slidesPerView: 'auto',// 设置slider容器能够同时显示的slides数量
       centeredSlides: true, // 居中幻灯片 默认active slide居左，设置为true后居中
       on: {
         init: () => {
           this.getProcessingTask(); // 页面加载时发起接口请求（这个方法也可以写在created钩子函数）
         },
         // 使用es6的箭头函数，使this指向vue对象（这段代码是重点，必须按照此方式写才可以调用到 this.getCurrentTaskList（）方法
         slideChange: ()=> {
           // 通过$refs获取对应的swiper对象
           let swiper = this.$refs.mySwiper.$swiper;
           this.getCurrentTaskList(swiper.realIndex);
         },
       },
     },
     // js部分
     computed: {
    	 // 滑动swiper时，获取当前等级的任务对象
    	  **注： this.currentLevelTask这个用于显示任务，就不具体上代码了，小白都知道咋写**
          getCurrentTaskList() {
            return (levelIndex) => {
              this.currentLevelTask = this.swiperList[levelIndex];
            }
          },
     }

问题二：

要实现的效果： 页面初始化时，swiper默认选中的图片要根据接口返回的值进行对应显示
实现思路： 接口请求成功后，根据返回值设置swiper的initialSlide的索引
所遇问题： 因为异步问题，在接口请求成功后设置initialSlide的索引不生效
解决方案： 改用slideTo()方法，具体见下面的代码

// 接口请求
 async getProcessingTask() {
    const {
      status,
      toastMsg,
      taskList,
    }= await this.$Apis.postGetProcessingTaskH5({})
    if (status !== 0 ){
      this.$toast(toastMsg);
      return;
    }
    this.showSuccessPop = false;
    this.swiperList = taskList;
    this.currentLevelTask = taskList[0];
    // 初始化时默认选中当前获得的等级
    taskList.forEach((item,index) => { 
      if(item.isCurrentLevel === 1) {
        this.$refs.mySwiper.$swiper.slideTo(index, 1000, false); // 此行代码是解决问题的核心
      }
    })
  },

再补充一下上面UI中swiper展示效果的实现代码，需要的伙伴可以直接搬走

// view部分
<div class="swipe-box">
    <swiper ref="mySwiper" :options="swiperOptions">
         <swiper-slide v-for='(item, index) in swiperList' :key='index'>
             <img :src="item.cardLevelUrl" alt="">
             <span v-if="item.isCurrentLevel === 1"
                     class="get-id-date current-level">当前等级</span>
             <span class="get-id-date">{{item.cardDesc}}</span>
         </swiper-slide>
     </swiper>
 </div>
 // js部分 Swiper的安装就不介绍了，自己百度吧，注意安装版本就好
 <script>
    import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
    import 'swiper/css/swiper.css';
	 data () {
	     return {
			swiperList: [], // swiper列表
			 swiperOptions: {
			    slidesPerView: 'auto',// 设置slider容器能够同时显示的slides数量
			    centeredSlides: true, // 居中幻灯片 默认active slide居左，设置为true后居中
			    on: {
			      init: () => {
			        this.getProcessingTask(); // 页面加载时发起接口请求
			      },
			      // 使用es6的箭头函数，使this指向vue对象
			      slideChange: ()=> {
			        // 通过$refs获取对应的swiper对象
			        let swiper = this.$refs.mySwiper.$swiper;
			        this.getCurrentTaskList(swiper.realIndex);
			      },
			    },
			  },
	  		}
	   	}
   	</script>
   	// css部分
   	<style lang="less" scoped>
   		.swipe-box{
            height: 180px;
            margin-top: 10px;
            .get-id-date{
                color: #333333;
                font-size: 13px;
                position: absolute;
                bottom: 50px;
                left: 14px;
            }
            .current-level{
                bottom: 100px;
            }
            .swiper-container {
                width: 100%;
                height: 100%;
            }
            /deep/.swiper-slide {
                width: 295px;
                height: 180px;
                transition: 300ms;
                transform: scale(0.9);
                img{
                    width: 100%;
                }
            }
            .swiper-slide-active,.swiper-slide-duplicate-active{
                transform: scale(1);
            }
        }
        </style>

以上就是全部的内容啦，有更好的解决方案的大佬儿，欢迎留言交流呀