【Swiper】Swiper 滚动插件在 vue3 的使用,并手动设置左右切换
2023-04-18 15:23:34 时间
效果图
需求展示:右上角可左右滑动并控制遮罩层显示隐藏;每行显示4个,每次滑动4个
安装
npm install Swiper
yarn add Swiper
pnpm add Swiper
代码
template
<!-- 控制分页 -->
<div class="btn" @click="addPage(-1)">
<img src="@/assets/temp/btn-pageforward.svg" alt="" />
<transition name="dialog">
<div class="mask" v-show="isShowLeftMask"></div>
</transition>
</div>
<div class="btn" @click="addPage(1)">
<img src="@/assets/temp/btn-pageback.svg" alt="" />
<transition name="dialog">
<div class="mask" v-show="isShowRightMask"></div>
</transition>
</div>
...其他样式根据ui设计来
<!-- swiper 组件 -->
<Swiper
@swiper="onSwiper"
@slideChange="onSlideChange"
:modules="[Virtual]"
:slides-per-group="4"
:slides-per-view="4"
:space-between="20"
virtual // 这里如果ts报错不影响配置使用
>
<SwiperSlide v-for="(item, index) in workList" :key="index" :virtualIndex="index">
<WorksCard :item="item" />
</SwiperSlide>
</Swiper>
script
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from "swiper/vue";
import { Virtual } from "swiper";
// Import Swiper styles
import "swiper/css";
// 总页数,根据你接口返回设置 Math.ceil(workList.value.length / pageSize.value);
const totalPage = ref<number>(0);
const pageSize = ref<number>(4); // 每页显示数量
const page = ref<number>(1); // 当前页码
let useSwiper: any = null; // swiper实例
// 初始化swiper
const onSwiper = (swiper: any) => {
useSwiper = swiper;
};
// 滑动事件记录分页
const onSlideChange = () => {
console.log("page", useSwiper.activeIndex / 4 + 1); // 页码
page.value = useSwiper.activeIndex / pageSize.value + 1;
};
// 是否显示遮罩
const isShowLeftMask = computed(() => {
return page.value == 1;
});
const isShowRightMask = computed(() => {
return page.value == totalPage.value;
});
// 分页
const addPage = (num: number) => {
if (num > 0) {
useSwiper.slideNext();
} else if (num < 0) {
useSwiper.slidePrev();
}
};
更多内容请参考
【swiper 官方】在 vue 中使用 swiper
【swiper 官方】中文 API 文档
【CSDN】vue3中使用swiper7轮播图插件
【华为云开发者联盟】Vue3.x使用Swiper Vue插件最新详细教程(包含修改swiper样式)
相关文章
- 【技术种草】cdn+轻量服务器+hugo=让博客“云原生”一下
- CLB运维&运营最佳实践 ---访问日志大洞察
- vnc方式登陆服务器
- 轻松学排序算法:眼睛直观感受几种常用排序算法
- 十二个经典的大数据项目
- 为什么使用 CDN 内容分发网络?
- 大数据——大数据默认端口号列表
- Weld 1.1.5.Final,JSR-299 的框架
- JavaFX 2012:彻底开源
- 提升as3程序性能的十大要点
- 通过凸面几何学进行独立于边际的在线多类学习
- 利用行动影响的规律性和部分已知的模型进行离线强化学习
- ModelLight:基于模型的交通信号控制的元强化学习
- 浅谈Visual Source Safe项目分支
- 基于先验知识的递归卡尔曼滤波的代理人联合状态和输入估计
- 结合网络结构和非线性恢复来提高声誉评估的性能
- 最佳实践丨云开发CloudBase多环境管理实践
- TimeVAE:用于生成多变量时间序列的变异自动编码器
- 具有线性阈值激活的神经网络:结构和算法
- 内网渗透之横向移动 -- 从域外向域内进行密码喷洒攻击