快過年了。。。css
vue更改默認滾動條樣式用的是"vuescroll"vue
安裝模塊： npm install vuescroll
main.js中引入： import vuescroll from "vuescroll";//引入vuescroll import "vuescroll/dist/vuescroll.css";//引入vuescroll樣式 Vue.use(vuescroll);//使用
開始使用( <vue-scroll></vue-scroll>標籤嵌套在會出現滾動內容的外面 )npm
<!-- 設置寬高而後進行配置 --> <vue-scroll :ops="ops" style="width: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; }
設置好後效果就出來了spa
