标签：插件 vue awesome height Scrollbar components import swiper

效果图

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,awesome,height,Scrollbar,components,import,swiper
来源： https://www.cnblogs.com/chenyingying0/p/12641600.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。