vue使用vue-awesome-swiper插件,实现滚动条组件
Posted chenyingying0
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue使用vue-awesome-swiper插件,实现滚动条组件相关的知识,希望对你有一定的参考价值。
效果图
src/components/scroll/index.vue
<template> <swiper class="swiper" :options="swiperOption"> <swiper-slide> <!-- 所有内容放在插槽里 --> <slot></slot> </swiper-slide> <div class="swiper-scrollbar" slot="scrollbar"></div> </swiper> </template> <script> import { Swiper, SwiperSlide } from ‘vue-awesome-swiper‘; import ‘swiper/css/swiper.css‘; export default { name: ‘Scrollbar‘, title: ‘Scrollbar‘, components: { Swiper, SwiperSlide }, data() { return { swiperOption: { scrollbar: { el: ‘.swiper-scrollbar‘, hide: true }, direction:‘vertical‘, slidesPerView:‘auto‘, freeMode:true, setWrapperSize:true } } } } </script> <style lang="scss" scoped> .swiper-container{ width:100%; height:100%; overflow:hidden; } .swiper-wrapper{ height:auto; } .swiper-slide{ height:auto; } </style>
src/pages/home/index.vue
<template> <div class="home"> <scrollbar> <slider /> <div class="content"></div> </scrollbar> <!-- 该页面自己的子路由 --> <router-view></router-view> </div> </template> <script> import Slider from ‘components/slider‘; import Scrollbar from ‘components/scroll‘; export default { name:"Home", components:{ Slider, Scrollbar } } </script> <style scoped> .home{ width:100%; height:100%; } .content{ height:1000px; } </style>
以上是关于vue使用vue-awesome-swiper插件,实现滚动条组件的主要内容,如果未能解决你的问题,请参考以下文章
vue轮播图插件vue-awesome-swiper的使用与组件化