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.0基于vue-cli+webpack Vuex的用法(实例讲解)
下面小编就为大家带来一篇Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要为大家详细介绍了Vue2.x通用条件搜索组件的封装及应用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-05-05
这篇文章主要介绍了vue中对时间戳的处理方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
这篇文章主要介绍了vue项目如何解决数字计算精度问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
vue中提供了一种混合机制--mixins，用来更高效的实现组件内容的复用。下面给大家谈谈我对vue中mixin的一点理解，需要的朋友参考下吧2017-12-12
这篇文章主要介绍了vue打包更新packge.json版本号的全过程,文章通过图文结合的方式给大家讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2024-08-08
vue-cli3访问public文件夹静态资源报错的解决方式
这篇文章主要介绍了vue-cli3访问public文件夹静态资源报错的解决方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
本文主要介绍了Vue.js的相关知识。具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
vue3使用Pinia修改state的三种方法(直接修改，$patch，actions)
Vue3 Pinia是一个状态管理库,专门为Vue3设计优化,它提供了一种简单而强大的方式来管理应用程序的状态,并且与Vue3的响应式系统紧密集成,本文给大家介绍了vue3使用Pinia修改state的三种方法,需要的朋友可以参考下2024-03-03
这篇文章主要介绍了vue 自定义提示框(Toast)组件的实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
最新评论