swiper插件报错 vue_vue使用vue-awesome-swiper插件，实现滚动条组件

效果图

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;

}

如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！