开源软件名称：

开源软件地址：

开源软件介绍：

vue-better-scroller

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

特点

• 得益于 better-scroll 使用 css3 transform3d 硬件加速实现滚动
  即使千条数据也不会有卡顿掉帧
• 使用 css3 calc 实现内部高度，避免使用原生better-scroll的不愉快
• 尽量减少用户配置可渐进式添加功能

安装

NPM安装

$ npm install vue-better-scroller

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

使用

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

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

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

文档

组件 attr 参数文档

例子

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

    <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代码