在 vue cli3 创建的项目中，使用 better-scroll 的具体步骤：

这篇文章是对于 vue cli3 创建的项目中，使用 better-scroll2.x 的具体步骤的一个总结：

---

• 先附上 better-scroll 2.x 中文文档 : https://better-scroll.github.io/docs/zh-CN/plugins/infinity.html
• better-scroll 概念 :

BetterScroll 是一个 插件，旨在 解决移动端的滚动情况（已支持PC）。核心是受 iscroll 实现的启发，因此 BetterScroll的 API 总体上与 iscroll 兼容。此外，BetterScroll 还扩展了某些功能，并基于 iscroll 优化了性能。BetterScroll 是用纯JavaScript 实现的，这意味着它没有依赖关系。

 

• better-scroll 插件安装 : 

//# install 1.x
npm install better-scroll -S 
//# install 2.x，with full-featured plugin.
npm install @better-scroll/core@next --save

• better-scroll 引入 :

//# install 1.x
import Bscroll from 'better-scroll'
//# install 2.x
import BScroll from '@better-scroll/core'

• better-scroll 使用 :

BetterScroll 最常见的应用场景是列表滚动。让我们看看它的HTML：页面结构要符合这样的，不一定非要div->ul->li但是必须最外层div要包裹一个大包;

<div class="wrapper">
  <ul class="content">
    <li>...</li>
    <li>...</li>
    ...
  </ul>
  <!-- you can put some other DOMs here, it won't affect the scrolling -->
</div>

<template>
    <div class="recommend_box" ref='wrapper'>
        <ul class="my_list">
            <li v-for="item in arr">第{{item}}条数据</li>
        </ul>
    </div>
</template>

<script>
    import Bscroll from 'better-scroll'
    export default{
        data(){
            return{
                arr:["1","2","3","4","5","6","7","8","9","10","1","2","3","4","5","6","7","8","9","10"]
            }
        },
        mounted(){
            this.$nextTick(() => {
                 this.scroll = new Bscroll(this.$refs.wrapper);
            });
        }
    }
</script>

<style scoped="scoped" lang="css">
  *{
    margin:0;
    padding:0;
  }
  html,body{
    height:100%;
    width:100%;
  }
  .recommend_box {
    width:100%;
    height: 300px;
    border:2px solid red;
    overflow: hidden;
  }

  .my_list {
    width:90%;
    margin:0 5%;
    border:2px solid black;
    min-height:500px;
    list-style:none;
  }
  .my_list li{
    height:100px;
    line-height:100px;
    width:100%;
    border-bottom:1px solid #f60;
  }
</style>