vue3 实现多组商品横向滚动（多组商品轮播）

实现功能: 点击按钮切换，每页5个商品，当最后商品不满一页时 切换剩余的商品，如果切换到第一个则禁用左边按钮，如果切换到最后一个禁用右边按钮

实现方式： 这里我们使用 vue-awesome-swiper 默认安装的最新版本 已经支持vue3和ts

1. 安装

npm install swiper vue-awesome-swiper --save 或者 yarn add swiper vue-awesome-swiper

2. 引入插件 这里我使用的是全局引入（main.js里面引入插件）

// 引入vue-awesome-swiper
import SwiperClass, {
    Pagination, Grid, Mousewheel } from 'swiper'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/css'
import 'swiper/css/pagination'
// use swiper modules
SwiperClass.use([Pagination, Grid, Mousewheel])

3. 组件里就可以使用这个插件了

<script setup lang="ts">
import {
    ref } from 'vue'
import SwiperClass from 'swiper'
// vertical swiper
let vSwiperRef: SwiperClass | null