Vue中使用Swiper简单封装组件示例
更新时间：2023年08月20日 16:34:51 作者：黄金原野
这篇文章主要为大家介绍了Vue中使用Swiper简单封装组件示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
正文
Swiper的最简单使用，参考官网教程
但通常情况下，<swiper-slide></swiper-slide>作为循环展示的内容，需要能够展示多种样式的循环列表，此时必须要使用slot
需要封装的Swiper组件命名为MySwiper.vue，代码如下
loop表示是否循环展示，值为false时会来回切换，相当魔性autoplay是否自动循环展示，值为false时不会自动循环，delay为每页停留的时间
需要循环的部分<swiper-slide>，其中应当包含的内容就是需要循环展示的自定义组件，使用slot插槽占位
在调用时，首先从父组件获取数据showList，传至子组件MySwiper，MySwiper中<swiper-slide>循环若干次，也就生成了若干的slot，在调用slot的时候，绑定名为item的attribute，在父组件中可以通过v-slot接受，参数起名为slotProps，b包含所有slot中传输的attribute，此处包含传输的item。
作用域插槽
<template>
<div class="swiper-display">
<swiper
:modules="modules"
:slides-per-view="1"
:space-between="50"
navigation
:pagination="{ clickable: true }"
:scrollbar="{ draggable: true }"
@swiper="onSwiper"
@slideChange="onSlideChange"
loop
autoplay="{
delay: 2000
}"
>
<swiper-slide class="swiper-item" v-for="item in list" :key="item.seq">
<slot :item="item"></slot>
</swiper-slide>
</swiper>
</div>
</template>
<script>
import { Navigation, Pagination, Scrollbar, A11y, Autoplay } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/vue';
import { onMounted } from 'vue';
import 'swiper/css';
export default {
components: {
Swiper,
SwiperSlide,
},
props: {
list: Array
},
setup(props) {
const onSwiper = (swiper) => {
// console.log(swiper);
};
const onSlideChange = () => {
// console.log('slide change');
};
return {
onSwiper,
onSlideChange,
modules: [Navigation, Pagination, Scrollbar, A11y, Autoplay],
autoPlay
};
},
}
</script>
<style lang="scss">
.swiper-display {
width: 100%;
height: 100%;
position: relative;
.swiper {
height: 100%;
.swiper-wrapper {
height: 100%;
.swiper-item {
height: 100%;
}
}
}
}
</style>使用方式如下，其中ToDisplay表示需要利用Swiper展示的自定义组件
<MySwiper v-slot="slotProps" :list="showList"> <ToDisplay :item="slotProps.item"></ToDisplay> </MySwiper>
此外，需要注意css的设置。<swiper-slide>中，如果直接写html内容，例如div之流，swiper-slide的高度可以被正常撑开。但如果写成一个封装组件，swiper-slide的高度会渲染为0，导致内容显示为空。
此处有两个解决方案：
- 设置
swiper-slide的高度。虽然可以解决，但通用性较差，如果能确保所有Swiper高度相同，可以考虑。但需要注意min-height是无效的，不会随着填充的内容高度增加而增加，相当于是一个固定值 - 将父元素逐个设置为100%，虽然有点傻，但能较好地适应
Swiper中内容高度不同的情况
.swiper-display {
width: 100%;
height: 100%;
position: relative;
.swiper {
height: 100%;
.swiper-wrapper {
height: 100%;
.swiper-item {
height: 100%;
}
}
}以上就是Vue中使用Swiper简单封装组件示例的详细内容，更多关于Vue Swiper封装组件的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了在Vue2中使用qrcode、jszip和file-saver库批量生成二维码并打包下载的实现方法,通过异步处理和Promise.all确保完成,优化建议包括分批次处理和文件名规范,需要的朋友可以参考下2025-06-06
这篇文章主要为大家介绍了Vue组件高级通讯之$attrs与$listeners使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
这篇文章主要为大家详细介绍了vue中SPA单页面应用程序的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
这篇文章主要为大家介绍了Vue的自定义事件内容分发，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-11-11
这篇文章主要介绍了Vue滚动页面到指定位置的实现及避坑，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了vue中用 async/await 来处理异步操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
面包屑导航栏是一种用户界面组件,用于展示用户在网站或应用中的路径,它包括了从主页到当前页面的链接序列,有助于用户快速了解和导航至上级页面,本文就来介绍一下Element-UI组件实现面包屑导航栏的示例代码,感兴趣的可以了解一下2024-09-09
这篇文章主要为大家详细介绍了vue Echarts实现仪表盘案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要介绍了vue3登录界面适配的二种方法,在Vue.js中使用计算属性和条件渲染来处理,每种方法都有其适用场景,选择哪种方法取决于具体需求,需要的朋友可以参考下2024-12-12
这篇文章主要为大家详细介绍了vue.js初学入门教程第二篇,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-11-11
最新评论