首先就是我用这个插件的目标
传统的下滑右侧这个滚动有点丑，而且各个浏览器这个scrollbar还不一样！最可恶的在于css调节后，火狐浏览器却不反对。现在找到了这个插件！真是快乐的想吃辣条庆贺一下
官网网址：https://better-scroll.github.io/docs/zh-CN/

第一步：装置 引入

cnpm i better-scroll -S

而后在应用的页面引入

<script type="text/ecmascript-6">import BetterScroll from 'better-scroll'export default { ... }</script>

第二步 应用

  1. app疏忽
  2. a就是筹备用的滑动外盒子，外面爱多少多少不必管
  3. ul无序列表
  4. li用Vue的遍从来100个
  5. mounted外面this.test()
  6. test外面创立一个名字bs，为了把本来的ID进行赋值
  7. mouseWheel就是问你 鼠标滑动是否开启
  8. scrollY问你要不要开启下滑
  9. scrollbar问你要不要显示那个滑动的彩色小棍
  10. 最初就是你抉择好的赋值回给scroll

最终成果

<template>    <div id="app">        <div class="a" ref="scroll">            <ul>                <li v-for="n in 100" :key="n">{{n}}</li>            </ul>        </div>    </div></template><script type="text/ecmascript-6">    import BetterScroll from 'better-scroll'    export default {        mounted() {            this.test()        },        methods: {            test() {                let bs = new BetterScroll(this.$refs.scroll, {                    mouseWheel: true,                    scrollY: true,                    scrollbar: true                })                this.$refs.scroll = bs            }        }    }</script><style lang="less">    *,    body,    html {        margin: 0;        padding: 0;    }    .a {        height: 100vh;        overflow: hidden;        width: 200px;        position: relative;        ul {            li {                height: 50px;                line-height: 50px;                font-size: 20px;                font-weight: bold;                text-align: center;                background: #a1a1a1;                border-bottom: 1px solid #e3e3e3;                color: #fff;            }        }    }</style>

爱我你怕了吗？