mpvue-dev-temp/src/components/TopSwiper.vue

<template>
  <div class="swiper">
    <swiper
      :indicator-dots="true"
      indicator-color="#EA5A49"
      :autoplay="true"
      :interval="6000"
      :duration="1000"
      :circular="true"
    >
      <div :key="imgindex" v-for="(top, imgindex) in imgUrls">
         <swiper-item>
           <!-- img中mode是小程序提供图片大小格式  -->
           <img 
             @click='bookDetail(img)'
             class="slide-image" 
             mode="aspectFit" 
             v-for="img in top"
             :key="img.id"
             :src="img.image"
             >
         </swiper-item>
      </div>
    </swiper>
  </div>
</template>
<script>
export default {
  props: ['tops'],
  computed: {
    imgUrls () {
      // 如果通用 请用chunk函数 比如lodash的chunk方法
      let res = this.tops
      console.log([res.slice(0, 3), res.slice(3, 6), res.slice(6)])
      return [res.slice(0, 3), res.slice(3, 6), res.slice(6)]
    }
  },
  methods: {
    bookDetail (item) {
      // console.log('top options', item);
      wx.navigateTo({
        url: '/pages/detail/main?id=' + item.id
      })
    }
  }
}
</script>
<style lang="scss">
.swiper{
  margin-top:5px;
  .slide-image{
    width:33%;
    height:250rpx;
  }
}
</style>