Vue中的better-scroll使用

赵不悔

首先就是我用这个插件的目的
传统的下滑右侧这个滚动有点丑,而且各个浏览器这个scrollbar还不一样!最可恶的在于css调节后,火狐浏览器却不支持。如今找到了这个插件!真是高兴的想吃辣条庆祝一下
官方网址https://better-scroll.github.io/docs/zh-CN/

image.png

第一步:安装 引入

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

最终效果

image.png

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

爱我你怕了吗?
image

阅读 1k

我以为租来的人生也能幸福…要不是幸福终究有个期限,我也就信了。

71 声望
1 粉丝
0 条评论
你知道吗?

我以为租来的人生也能幸福…要不是幸福终究有个期限,我也就信了。

71 声望
1 粉丝
宣传栏