vue-awesome-swiper的使用

1.安装npm install swiper vue-awesome-swiper --save

2.在main.js中引入

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
// import style (>= Swiper 6.x)
import 'swiper/swiper-bundle.css'
Vue.use(VueAwesomeSwiper)

3.在组件中使用

<template>
  <swiper ref="mySwiper" :options="swiperOptions">
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    <swiper-slide>Slide 4</swiper-slide>
    <swiper-slide>Slide 5</swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</template>
<script>
	export default{
	 data(){
		return{
		swiperOptions: {
          pagination: {
            el: '.swiper-pagination'   //小圆点
            },
           },
          loop: true,   //循环播放
	     }
	   }
	}
</script>

小demo

效果图如下：

需求：实现每页轮播有指定个数的元素（我是指定的每页8个）
思路分析：
1.首先根据数据类型如下

 list: [
        { icon: "iconfont icon-RectangleCopy", name: "美食" },
        { icon: "iconfont icon-RectangleCopy2", name: "服装" },
        { icon: "iconfont icon-RectangleCopy34", name: "包包" },
        { icon: "iconfont icon-RectangleCopy4", name: "鞋子" },
        { icon: "iconfont icon-RectangleCopy5", name: "衣服" },
        { icon: "iconfont icon-RectangleCopy6", name: "裤子" },
        { icon: "iconfont icon-RectangleCopy7", name: "袜子" },
        { icon: "iconfont icon-RectangleCopy8", name: "零食" },
        { icon: "iconfont icon-RectangleCopy9", name: "住宿" },
        { icon: "iconfont icon-RectangleCopy10", name: "酒店" },
        { icon: "iconfont icon-RectangleCopy11", name: "健身房" },
        { icon: "iconfont icon-RectangleCopy12", name: "餐厅" },
        { icon: "iconfont icon-RectangleCopy13", name: "娱乐" },
        { icon: "iconfont icon-RectangleCopy14", name: "美食" },
        { icon: "iconfont icon-RectangleCopy22", name: "服装" },
        { icon: "iconfont icon-RectangleCopy23", name: "包包" },
        { icon: "iconfont icon-RectangleCopy24", name: "鞋子" },
        { icon: "iconfont icon-RectangleCopy25", name: "衣服" },
        { icon: "iconfont icon-RectangleCopy26", name: "裤子" },
        { icon: "iconfont icon-RectangleCopy27", name: "袜子" },
        { icon: "iconfont icon-RectangleCopy28", name: "零食" },
        { icon: "iconfont icon-RectangleCopy29", name: "住宿" },
        { icon: "iconfont icon-RectangleCopy30", name: "酒店" },
        { icon: "iconfont icon-RectangleCopy31", name: "健身房" },
        { icon: "iconfont icon-RectangleCopy32", name: "餐厅" },
        { icon: "iconfont icon-RectangleCopy33", name: "娱乐" },
      ],

2.将数据改成此种格式[[…],[…],[…]…] (二维数组,最外层是有几个轮播，内层元素则是当前轮播页的元素) 重要的一步

 computed: {
    // 处理list数据
    newList() {
      let arr = [];
      this.list.forEach((item, index) => {
        let idx = Math.floor(index / 8);   
        if (!arr[idx]) {
          arr[idx] = [];
        }
        arr[idx].push(item);
      });
      return arr;
    },
  },

3.循环遍历处理后的数据newList

<template>
  <div class="swiper1">
    <swiper ref="mySwiper" :options="swiperOptions">
      <swiper-slide v-for="(bigItem, index) in this.newList" :key="index">
        <div class="item-box">
          <div
            class="item-mini"
            v-for="(miniItem, index) in bigItem"
            :key="index"
          >
            <span :class="miniItem.icon"></span>
            <span>{{ miniItem.name }}</span>
          </div>
        </div>
      </swiper-slide>
      <div class="swiper-pagination"></div>
    </swiper>
  </div>
</template>

未完成
1.分页小圆点没显示
2.设置了自动轮播没反应