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" />
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文档