Vue better-scroll使用指南

1.安裝（官方文檔上有，不多言了）

NPM

better-scroll 托管在 Npm 上，執行如下命令安裝：

npm install better-scroll --save

接下來就可以在代碼中引入了，webpack 等構建工具都支持從 node_modules 里引入代碼：

import BScroll from 'better-scroll' 

如果是 ES5 的語法，如下：

var BScroll = require('better-scroll') 

script 加載

better-scroll 也支持直接用 script 加載的方式，加載后會在 window 上掛載一個 BScroll 的對象。

你可以直接用：https://unpkg.com/better-scroll@1.0.1/dist/bscroll.min.js 這個地址。也可以把 dist 目錄下的文件拷貝出去發布到自己的 cdn 服務器。

2.Scroll的封裝（每個頁面都導入使用太過於麻煩，耦合太高，因此我做了封裝）

<template>
    <div class="wrapper" ref="wrapper">
        <div class="content">
            <slot></slot>
        </div>
    </div>
</template>

<script>
    import BScroll from 'better-scroll'

    export default {
        name: "Scroll",
        props: {
            probeType: {
                type: Number,
                default: 0
            },
            pullUpLoad: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                scroll: null,
                message: '哈哈哈'
            }
        },
        mounted() {
            // 1.創建BScroll對象
            this.scroll = new BScroll(this.$refs.wrapper, {
                click: true,
                probeType: this.probeType,
                pullUpLoad: this.pullUpLoad
            })

            // 2.監聽滾動的位置
            this.scroll.on('scroll', (position) => {
                // console.log(position);
                this.$emit('scroll', position)
            })

            // 3.監聽上拉事件
            this.scroll.on('pullingUp', () => {
                this.$emit('pullingUp')
            })
        },
        methods: {
            scrollTo(x, y, time = 300) {
                this.scroll.scrollTo(x, y, time)
            },
            finishPullUp() {
                this.scroll.finishPullUp()
            }
        }
    }
</script>

<style scoped>

</style>

3.使用 (將想要滾動的內容放在 <Scroll-box></Scroll-box>中即可)

<template>
        <scroll-box class="content">
     <div></div>    
        </scroll-box>
    </div>
</template>

<script>
    import Scroll from '../../subcomponents/Scroll'
    export default {
    
        data() {
            return {
            }
        },
        components: {
            'scroll-box': Scroll
        },
        created() {
        },
        methods: {
    }
</script>

<style lang="scss" scoped>
    .content {
        height: 350px;
    }
</style>

4.其他

其他問題，就是如何調整最合適的滾動區域，以及監聽滾動的位置了，在官方文檔上查看即可