轮播icon的显示

icon图标的显示

拿到数据之后

然后需要显示滚动的icon的

需要显示两页可以滚动的数据 一页只能放八个,这时候就需要自己处理下数据了

 computed: {
    pages() {
      const pages=[]
      this.iconListData.forEach((item,index)=>{ //可以遍历拿到的数据iconListData
        // console.log(item,index);
        const page = Math.floor(index/8)  //然后用下标去除以8 也就是一页放八个,然后会的得到下标
        // console.log(page);
        // console.log(pages[page]);
        if(!pages[page]){ //然后判断如果没有数据 就让他等于[]
          pages[page]=[]
        }
        pages[page].push(item) // 然后把这些数据放到刚才设定好的pages[page]中
        console.log(pages); //返回数据
      })
      return pages
    },
  },

<template>
  <div class="swiper">
    <div v-swiper:mySwiper="swiperOption">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for='(item,index) in pages' :key='index'>
          <ul>
            <li v-for="item1 in item" :key="item1.id">
              <img :src="item1.imgUrl" />
              <p>{{ item1.title }}</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>