bscroll在vue中使用 vue bfc

bscroll是一款基于原生JavaScript的滚动插件，可以实现在移动端页面中的滚动效果。在Vue中使用bscroll可以通过vue-bfc插件来实现。

我们需要安装vue-bfc插件。可以通过npm命令来安装：

npm install vue-bfc --save

安装完成后，在Vue项目中引入vue-bfc插件：

import Vue from 'vue'
import VueBfc from 'vue-bfc'
Vue.use(VueBfc)

接下来，我们可以在Vue组件中使用bscroll。在template中定义一个容器元素，用来包裹需要滚动的内容：

<template>
  <div class="a357-f639-4097-d57b wrapper">
    <div class="f639-4097-d57b-8378 content">
      <!-- 内容 -->
    </div>
  </div>
</template>

然后，在script中使用bscroll来初始化滚动效果：

<script>
export default {
  mounted() {
    this.$nextTick(() => {
      this.initScroll()
    })
  },
  methods: {
    initScroll() {
      const wrapper = document.querySelector('.wrapper')
      const content = document.querySelector('.content')
      this.scroll = new BScroll(wrapper, {
        probeType: 3,
        click: true
      })
    }
  }
}
</script>

在上面的示例代码中，我们首先通过`document.querySelector`来获取容器元素和内容元素的DOM节点。然后，使用`new BScroll()`来初始化bscroll插件，传入容器元素和一些配置选项。在这个例子中，我们使用了`probeType: 3`来开启滚动过程中的实时监听，以及`click: true`来开启点击事件。

我们需要在样式中设置容器元素的高度，以及内容元素的高度。这样bscroll才能正确计算滚动的范围。可以通过CSS来设置：

<style>
.wrapper {
  height: 100%;
  overflow: hidden;
}
.content {
  height: 100%;
  overflow: auto;
}
</style>

在上面的示例代码中，我们设置了容器元素的高度为100%，并且隐藏了溢出内容。内容元素的高度也设置为100%，并且开启了垂直方向的滚动。

总结一下，在Vue中使用bscroll，我们首先需要安装vue-bfc插件，并在Vue项目中引入。然后，在Vue组件中定义一个容器元素和内容元素，并在mounted钩子函数中使用bscroll来初始化滚动效果。通过CSS设置容器元素和内容元素的高度。这样就可以实现在Vue项目中使用bscroll插件来实现滚动效果了。