vue使用vue-awesome-swiper插件，实现滚动条组件
程序员文章站
2022-07-10 21:35:05
效果图 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>
推荐阅读
-
在vue中使用v-model如何实现父子组件通信
-
vue以组件或者插件的形式实现throttle或者debounce
-
基于elementUI使用v-model实现经纬度输入的vue组件
-
vue2.0 使用element-ui里的upload组件实现图片预览效果方法
-
详解vue使用vue-layer-mobile组件实现toast，loading效果
-
基于elementUI使用v-model实现经纬度输入的vue组件
-
Vue使用zTree插件封装树组件操作示例
-
Vue使用.sync 实现父子组件的双向绑定数据问题
-
vue2.0 使用element-ui里的upload组件实现图片预览效果方法
-
基于vue.js轮播组件vue-awesome-swiper实现轮播图