页面效果
swiper常用的一些参数
-
slidesPerView：每次显示几个轮播图
-
spaceBetween：每个轮播图之间的间距（单位：px）
-
loop：是否循环滚动
-
centeredSlides：是否居中对齐（true:居中，false：左对齐），默认 false 左对齐，
-
autoplay：是否自动播放
-
navigation：是否左右切换箭头
-
pagination：分页配置
- clickable：在点击分页圆点的时候，是否进行切换
如需要了解其他属性可以进入官网进行学习 Swiper API (swiperjs.com)
1、使用命令进行安装swiper组件
npm i swiper
2、在需要使用的页面中引入
<template>
<div ref="topContent">
<swiper class="swiperbox" :slidesPerView="slideViewNum" :spaceBetween="50" :navigation="true" :modules="[Navigation]">
<swiper-slide v-for="(item, index) in topList" :key="index">{{ item.name }}</swiper-slide>
</swiper>
</div>
</template>
<script lang="ts" setup>
import { Swiper, SwiperSlide } from 'swiper/vue' // swiper 所需组件
import { ref } from 'vue'
import { Navigation } from 'swiper'// 使用到的属性
import 'swiper/css'
import 'swiper/css/navigation'
const slideViewNum = ref<number>(0)
const topContent = ref<HTMLDivElement>()
const topList = ref([{
name: '111'
}, {
name: '222'
}, {
name: '333'
}, {
name: '444'
}, {
name: '555'
}, {
name: '666'
}, {
name: '777'
}, {
name: '888'
}])
// 计算顶部指标轮播显示个数
const countSwiperNum = () => {
setTimeout(() => {
slideViewNum.value = Math.floor(((topContent.value?.clientWidth || 0) - 32) / 500)
if (topList.value.length < slideViewNum.value) {
slideViewNum.value = topList.value.length
}
}, 150);
}
countSwiperNum()
</script>
<style lang="scss" scoped>
.swiperbox {
height: 100px;
text-align: center;
line-height: 100px;
background-color: #0e87d6;
--swiper-navigation-color: #fff;
/* 单独设置按钮颜色 */
--swiper-navigation-size: 30px;
/* 设置按钮大小 默认是44px */
}
</style>
