BSroll Vue是一個基于Vue.js的插件，為移動端提供了一種流暢的滾動體驗。BScroll Vue的核心是BSroll.js，它是一款獨立于任何庫的滾動庫，

解決了在移動端滾動的卡頓以及各種滾動問題

BScroll Vue 將BSroll.js的功能整合進Vue.js中。這個插件要求用戶先手動創建一個BScroll實例，然后將其綁定到Vue組件上。在組件掛載時，會自動調用BScroll實例的相關方法去初始化滾動。這樣就實現了在Vue中使用BScroll.js的效果。

BScroll Vue提供了兩種綁定方式：指令和組件。指令的優點是使用更方便，不需要創建額外的組件；缺點是靈活性差，有些高級功能無法使用。組件的優點是可定制性高，可以在組件中添加更多的配置項和方法；缺點是使用起來稍微麻煩一些。

<template>
<div class="wrapper">
<div class="content" v-bscroll>
<p v-for="i in 20" :key="i">{{ i }}</p>
</div>
</div>
</template>
<script>
import BScroll from 'bscroll';
import BScrollVue from 'bscroll-vue';
Vue.use(BScrollVue);
export default {
directives: {
bscroll: {
inserted: (el) => {
new BScroll(el);
},
componentUpdated: (el) => {
el.scroll.refresh();
}
}
},
};
</script>

在Vue模板中，使用v-bscroll指令即可實現滾動。在組件的options中，我們將BSroll實例掛載在了directives中。當指令被綁定到元素時，它會自動創建一個BSroll實例并將其綁定到元素上。指令的updated方法中調用了BSroll實例的refresh方法，以處理動態添加和刪除元素后的滾動問題。

BScroll Vue還提供了與better-scroll.js一樣的API，如scrollTo、refresh、destroy等方法，讓開發更加方便。