vue使用better-scroll实现下拉刷新和上拉加载，文末附文档

背景

在使用VUE 开发APP过程中由于uniapp各项限制，决定弃用，直接使用VUE-CLI进行开发。其中遇到的一个问题就是上拉加载和下来刷新的问题，直接使用window.addEventListener scroll在移动端是无效的。后来采用了better-scroll库实现，但是在使用时发现在理解上有些问题导致期初使用有点疙瘩，这里梳理一下逻辑，最后附上代码。

逻辑

展示部分

其实better-scroll库的逻辑很简单，繁琐的是配置和文档。基本逻辑就是外框固定高度或宽度小于内框（取决于你想用来做纵向还是横向移动），使我们在外框的空间里做内框的移动。这里是做上拉加载和下拉刷新，所以只需要限定高度。这里就是我们的HTML和CSS部分，容易出现问题的是
高度未设置或外框大于内框（见CSS写法）

逻辑部分

JS中配置笔记简单，无非就是
1.实例化对象
2.对象配置
3.对象监听
4.监听方法。

其实很简单，但是由于我在使用过程中没有认真阅读文档，所以踩了很多坑：

1.实例化对象部分容易出现的问题是：scroll对象没有定义在外框上（见JS的实例化部分）
2.对象配置的写法一定要认真跟文档走，例如scrollY默认是开启的，而scrollX则默认是关闭的，对象中的click事件默认是关闭的，不知道的话写完了发现里面的项目无法点击等问题。再如pullUpLoad等的设置有它明确的设置项，再入监听方法也是固定的几项（再次提醒，一定好好阅读文档，文末参考链接中第二条）
3.对象监听，详细监听事件还是去文末看文档，另外有人提问反馈的一个低级错误也说一下，监听事件写在mounted中。
4.监听方法一般没什么坑可以踩。

小结

所以这里明确了几件事
1.外框固定高度
2.内框高>外框
3.scroll对象配置属性
4.scroll对象启用监听

代码

HTML

<div class='con' ref="wr">
    <div>
      <div class='num' v-for='(item,index) in items' :key='index'>{{item}}</div>
    </div>
 </div>

JS

import BScroll from 'better-scroll'	//引入better-scroll库
export default {
  data () {
    return {
      scroller:null,
      items:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23],
    }
  },
   methods:{
   },
   mounted(){
    this.scroller=new BScroll(this.$refs.wr,{		//定义滚动器
      scrollY:true,
      click:true,		//启用点击事件
      pullUpLoad:{		//启用上拉配置
        threshold:50,	//上拉动作触发距离
      }  
    });
    this.scroller.on('pullingUp',()=>{
      console.log("上拉加载");
    })
   }
}

CSS

.con{
  height: 60vh;
  overflow: hidden;
  background: #ddd;
}
.num{
  height: 30px;
}

参考

1.npm官方（虽然是官方，但是内容太少不实用）
2.better-scroll文档，各项配置看这里
3.看了我的文章还没看懂，又没耐心的可以看B站视频