vue使用vue-awesome-swiper插件，实现滚动条组件
程序员文章站
2022-05-04 11:15:14
效果图 src/components/scroll/index.vue
效果图
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>
下一篇： Go语言库系列之aurora