vue-better-scroller

一款基于 better-scroll.js （已内置依赖无需导包）
为 vue.js 提供 scroll 滚动，上拉加载，下拉刷新
使用 es6， vue-cli 3 构建

特点

NPM安装

$ npm install vue-better-scroller

也可手动下载Common JS 及 UMD JS手动导入编译好的js文件放于 dist 文件夹

在 main.js 文件中引入插件并注册

# main.js
import Scroll from "vue-better-scroller";
Vue.use(Scroll)

<template>
  <scroll>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </scroll>
</template>

组件 attr 参数文档

名称	功能	默认值	可选值
data	用于监听数据变化停止上拉下拉状态	空	object / array
scrollbar	是否显示滚动条	false	true / false
direction（开发中）	滚动方向	vertical	vertical / horizontal
bounce	各方向回弹效果开关	{ top: true, bottom: true, left: true, right: true }	修改相应参数即可
options	可选功能（如开启关闭上拉加载下拉刷新）	{ pullup: false, pulldown: false, click: true, probeType: 0 }	修改相应参数即可

单独使用滚动（添加滚动回弹效果及滚动条）

  <scroll :scrollbar="true">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </scroll>

添加上拉刷新及下拉加载

  <scroll :options="{ pullup: true, pulldown: true }" :ref="scroll">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </scroll>

注意：在上拉加载结束后需要调用

  this.$refs.scroll.pullupEnd();

关闭上拉加载功能

下面截图于本人公司项目DEMO实现因此无法提供DEMO代码