zoukankan      html  css  js  c++  java
  • vue使用vue-awesome-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{
            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{
            100%;
            height:100%;
        }
        .content{
            height:1000px;
        }
    </style>
  • 相关阅读:
    Git之GitFlow工作流
    auth
    rbac
    修改或删除windows上的git用户凭证信息
    Linux之shell备份数据库
    解决Navicat 连接服务器数据库报10060问题
    PHP框架学习思路
    shell之hello world
    Linux命令大全
    PHP 各个版本的区别
  • 原文地址:https://www.cnblogs.com/chenyingying0/p/12641600.html
Copyright © 2011-2022 走看看