zoukankan      html  css  js  c++  java
  • vue 设置滚动条 ant design vue

    ant design vue组件中没有关于滚动条的设置

    • 这篇文章介绍了怎么设置滚动条https://www.cnblogs.com/home-/p/12195761.html
    • 插件官网:https://vuescrolljs.yvescoding.org/zh/demo/

    内容如下

    安装模块:
    npm install vuescroll
    main.js中引入:
    import vuescroll from "vuescroll";//引入vuescroll
    import "vuescroll/dist/vuescroll.css";//引入vuescroll样式
    Vue.use(vuescroll);//使用
    <!-- 设置宽高然后进行配置 -->
    <vue-scroll :ops="ops" style="100%;height:100%">
         省去内容......
    </vue-scroll>
    
    data中:
     ops: {
            vuescroll: {},
            scrollPanel: {},
            rail: {
              keepShow: true
            },
            bar: {
              hoverStyle: true,
              onlyShowBarOnScroll: false, //是否只有滚动的时候才显示滚动条
              background: "#F5F5F5",//滚动条颜色
              opacity: 0.5,//滚动条透明度
              "overflow-x": "hidden"
            }
          }
    
    style中:
    // 滚动条位置
    /deep/.__bar-is-vertical {
      right: -1px !important;
    }
    // 隐藏横向滚动条
    /deep/.__bar-is-horizontal {
      display: none !important;
    }
  • 相关阅读:
    restapi(6)- do it the functional way, 重温函数式编程
    JS模块化
    socket.io websocket
    CSS 文字换行
    webpack初识
    升级nodejs至最新
    JavaScript Promise迷你书(中文版)
    时间格式化
    npm yarn
    深入浅出MongoDB应用实战开发
  • 原文地址:https://www.cnblogs.com/svvv/p/13953933.html
Copyright © 2011-2022 走看看