效果图
src/components/scroll/index.vue
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
}
}
}
}
.swiper-container{
width:100%;
height:100%;
overflow:hidden;
}
.swiper-wrapper{
height:auto;
}
.swiper-slide{
height:auto;
}
src/pages/home/index.vue
import slider from 'components/slider';
import scrollbar from 'components/scroll';
export default {
name:"home",
components:{
slider,
scrollbar
}
}
.home{
width:100%;
height:100%;
}
.content{
height:1000px;
}
如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!