vue項目修改滾動條樣式
這是我寫的一個簡單的效果,隻是為了實作功能,具體樣式樣式可以根據自己的需求去寫。
1. 首先需要先下載下傳我們所需要的子產品,這裡我用的是“vuescroll”
//老規矩,先安裝子產品
npm install vuescroll
2. 在項目中進行導入
//main.js
import vuescroll from 'vuescroll';
import 'vuescroll/dist/vuescroll.css';
Vue.use(vuescroll);
3. 引入(浏覽器環境)
<!-- html -->
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuescroll"></script>
<!-- 引入vuescroll-slide -->
<script src="https://unpkg.com/vuescroll/dist/vuescroll-slide.js"></script>
<!-- 引入vuescroll-native -->
<script src="https://unpkg.com/vuescroll/dist/vuescroll-native.js"></script>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/vuescroll/dist/vuescroll.css" target="_blank" rel="external nofollow" />
4. 使用
<!-- 元件的模闆 -->
<template>
<div class='your-container'>
<!-- bind your configurations -->
<vue-scroll :ops="ops" style="width:200px;height:100px">
<ul class='your-content'>
<li>dsfdsfdfg</li>
<li>dsfdsfdfg</li>
<li>dsfdsfdfg</li>
<li>dsfdsfdfg</li>
<li>dsfdsfdfg</li>
<li>dsfdsfdfg</li>
<li>dsfdsfdfg</li>
<li>dsfdsfdfg</li>
<li>dsfdsfdfg</li>
<li>dsfdsfdfg</li>
<li>dsfdsfdfg</li>
<li>dsfdsfdfg</li>
</ul>
</vue-scroll>
</div>
</template>
<!-- 元件的模型 -->
<script>
export default {
// 元件的名稱
name: "car",
data() {
return {
ops: {
vuescroll: {},
scrollPanel: {},
rail: {
keepShow:true
},
bar: {
hoverStyle: true,
onlyShowBarOnScroll: false, //是否隻有滾動的時候才顯示滾動條
background: 'red',
}
},
}
},
}
</script>
然後效果就出來啦,如果還需要其他的配置可以參考vuescroll的api文檔