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

优秀的土豆丝

已于 2022-06-09 17:35:23 修改

阅读量3k

点赞数

分类专栏： vue3 vue 文章标签： vue.js javascript css

于 2022-06-09 17:35:12 首次发布

本文链接：https://blog.csdn.net/qq_36773704/article/details/125207520

版权

vue 同时被 2 个专栏收录

34 篇文章 1 订阅

订阅专栏

11 篇文章 0 订阅

订阅专栏

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

在这里插入图片描述

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

安装

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

引入插件这里我使用的是全局引入（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])

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

<script setup lang="ts">
import { ref } from 'vue'
import SwiperClass from 'swiper'
// vertical swiper
let vSwiperRef: SwiperClass | null = null
const setVSwiperRef = (swiper: SwiperClass) => {
  vSwiperRef = swiper
}
let vSwiperIndex = ref<number>(0)
const updateVSwiperIndex = () => {
  vSwiperIndex.value = vSwiperRef?.activeIndex || 0
}
// 切换到上一页
const prevVSwiperSlide = () => vSwiperRef?.slidePrev()
// 切换到下一页
const nextVSwiperSlide = () => vSwiperRef?.slideNext()
</script>

<template>
  <div class="box">
    <div class="arrow">
      <a
        href="javascript:;"
        @click="prevVSwiperSlide"
        :class="{ disabled: vSwiperIndex === 0 }"
        class="iconfont prev"
        >&lt;</a
      >
      <a
        href="javascript:;"
        :class="{ disabled: vSwiperIndex === 5 }"
        @click="nextVSwiperSlide"
        class="iconfont next"
        >&gt;</a
      >
    </div>
    <swiper
      :slides-per-view="5"
      :slides-per-group="5"
      :space-between="14"
      wrapper-tag="div"
      @swiper="setVSwiperRef"
      @slide-change="updateVSwiperIndex"
    >
      <swiper-slide v-for="item in 10" :key="item">
        {{ item }}
      </swiper-slide>
    </swiper>
  </div>
</template>

<style lang="less" scoped>
.box {
  width: 1240px;
  margin: 0 auto;
}
.arrow {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 4px;
}
.iconfont {
  width: 20px;
  height: 20px;
  background: #ccc;
  color: #fff;
  display: inline-block;
  text-align: center;
  margin-left: 5px;
  background: @xtxColor;
  &::before {
    font-size: 12px;
    position: relative;
    top: -2px;
  }
  &.disabled {
    background: #ccc;
    cursor: not-allowed;
  }
}
:deep(.swiper-slide) {
  height: 280px;
  background: yellowgreen;
  text-align: center;
  line-height: 280px;
}
</style>