当前位置： 移动技术网 > IT编程>开发语言>JavaScript > vue使用vue-awesome-swiper插件，实现滚动条组件

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

2020年04月06日  | 移动技术网IT编程  | 我要评论

效果图

 

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>

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网