vue-awesome-swiper组件使用的一些小坑儿及解决办法

渲染axios请求回来的数据时，显示的swiper不是第一张

解决思路其实

子组件：

//子组件iconSwiper
<div class="wrapper">
<!--如果list长度不为0就是true，swiper才会出现-->
    <swiper :options="swiperOption" v-if="showSwiper">
    <swiper-slide v-for = "item of list" :key = "item.id">
        <img class="swiper-img" :src="item.imgUrl" alt="SoftTravelTicket">
    </swiper-slide>
    </swiper>
 </div>
复制代码

<script>
export default {
  name: 'HomeSwiper',
  // 接收父组件home传过来的数据swiperList
  props: {
    list: Array
  },
  data () {
    return {
      swiperOption: {
        pagination: '.swiper-pagination',
        loop: true,
        autoplay: 2000,
        //这一行可以解决滑动后不再自动播放的问题
        autoplayDisableOnInteraction: false
      }
    }
  },
  computed: {
  // 返回父组件传过来的值的长度
    showSwiper () {
      return this.list.length
    }
  }
}
</script>
复制代码

父组件：

<template>
    <!--给子组件的list变量传递值iconList-->
    <home-icons :list="iconList"></home-icons>
</template>

<script>
// 引入组件
import HomeIcons from './components/Icons'
// 引入axios
import axios from 'axios'
export default {
  name: 'Home',
  components: {
    HomeIcons
  },
  data () {
    return {
      iconList: []
    }
  },
  methods: {
    getHomeInfo () {
      axios.get('./api/index.json')
        .then(this.getHomeInfoSucc)
    },
    getHomeInfoSucc (res) {
      res = res.data
      if (res.ret && res.data) {
        const data = res.data
        this.city = data.city
        this.swiperList = data.swiperList
        this.iconList = data.iconList
      }
      console.log(res)
    }
  },
  mounted () {
    this.getHomeInfo()
  }
}
</script>
复制代码

转载于:https://juejin.im/post/5cbb2f17e51d456e425dd9b5