vux scroller 上拉加载下拉刷新组件（vux scroller 使用and坑）

怎么引入什么的就不说了，直接代码

<div style="padding-top:50px;">    <!-- 距离上部   有的时候上面会需要有一个固定头-->
  <scroller							
    lock-x 						   <!-- x轴方向禁止移动（水平）-->
    height="-150"				   
    @on-scroll-bottom="onScrollBottom" <!-- 滚动到底部触发-->
    ref="scrollerBottom" 				
    :scroll-bottom-offst="200"			<!-- 距离底部多少触发 -->
    use-pullup							<!-- 启用上拉 -->
    :pullup-config="pullupDefaultConfig"<!-- 上拉配置 -->
    @on-pullup-loading="loadMore"		<!-- 上拉加载方法 -->
    use-pulldown						<!-- 启用下拉 -->
    :pulldown-config="pulldownDefaultConfig"<!-- 下拉配置 -->
    @on-pulldown-loading="refresh"		<!-- 下拉刷新方法 -->
  >
    <div class="box2">
      <p v-for="i in bottomCount">placeholder {{ i }}</p>  <!-- 一定要有一个整体的div -->
    </div>
  </scroller>
</div>

上拉下拉要在data()里注册

data(){
	return(){
	    pullupDefaultConfig: pullupDefaultConfig,
  		pulldownDefaultConfig: pulldownDefaultConfig,
  		bottomCount: 50,	
	}
}

配置不要写在export default里

  //下拉刷新配置
  const pulldownDefaultConfig = {
    content: '下拉刷新',
    height: 40,
    autoRefresh: false,
    downContent: '下拉刷新',
    upContent: '释放后刷新',
    loadingContent: '正在刷新...',
    clsPrefix: 'xs-plugin-pulldown-',
  };
  //上拉加载配置
  const pullupDefaultConfig = {
    content: '上拉加载更多',
    pullUpHeight: 60,
    height: 40,
    autoRefresh: false,
    downContent: '释放后加载',
    upContent: '上拉加载更多',
    loadingContent: '加载中...',
    clsPrefix: 'xs-plugin-pullup-',
  };

js

      //滚动到底部触发  注意事件会触发多次，如果你需要进行数据获取，记得设置一个状态值
      onScrollBottom() {}, //一般不怎么用
	  // 上拉加载方法
      loadMore() {
        //   先调用接口
        //判断是否有新的数据
        if (this.bottomCount < 80) {
          this.bottomCount += 10;
          this.$refs.scrollerBottom.donePullup(); //表示上拉数据加载完了  执行调用执行完的方法
        } else {
          //没用更多数据的时候调用  禁止上拉组件
          this.$refs.scrollerBottom.disablePullup();
        }
     
      },
      //下拉刷新方法
      refresh() {
        //刷新接口
        this.bottomCount = 50;
        //接口调用完执行下面两个
        this.$refs.scrollerBottom.enablePullup(); //启用上拉刷新插件
        this.$refs.scrollerBottom.donePulldown(); //设置下拉刷新操作完成，在数据加载后执行

        //刷新之后过1秒返回最上面
        setTimeout(() => {
          this.$nextTick(() => {
            this.$refs.scrollerBottom.reset({ top: 0 });
          });
        }, 1000);
      },

注：

1、使用scroller组件时，一定要有一个整体的div

2、可以滑动，但是一松手会滑倒顶部

在数据返回后，绑定到页面后，对scroller组件进行初始化

  this.$nextTick(() => {
        this.$refs.scrollerBottom.reset()
  })