vue-awesome-swiper元件使用的一些小坑兒及解決辦法

梭梭醬加油鴨發表於2019-04-21
Vue元件

渲染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>
複製程式碼

相關文章