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文檔