基于better-scroll实现移动端vue上拉加载下拉刷新

插件地址
引用文章

一、什么事better-scroll？

better-scroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。

better-scroll 是基于原生 JS 实现的，不依赖任何框架。它编译后的代码大小是 63kb，压缩后是 35kb，gzip 后仅有 9kb，是一款非常轻量的 JS lib。

better-scroll的滚动原理

二、使用

1.安装

首先在package.json里面加入better-scroll的依赖，然后使用npm安装

npm install better-scroll --save-dev

2.引入

在需要使用的插件中引入better-scroll

import BScroll from 'better-scroll'

3.vue使用better-scroll

//html

//js

//css
    .wrapper{
        width: 100%;
        height: 300px;
        background: #ccc;
        overflow: hidden;
        position: relative;
    }

    li{
        line-height: 50px;
        border-bottom: 1px solid #ccc;
        text-align: center;
    }

    /* 下拉、上拉提示信息 */
    .top-tip{
        position: absolute;  
        top: -40px;  
        left: 0;
        z-index: 1;  
        width: 100%;  
        height:40px;  
        line-height:40px;  
        text-align:center;
        color: #555;
    } 
      
    .bottom-tip{
        width: 100%;
        height: 35px;
        line-height: 35px;
        text-align: center;
        color: #777;
        background: #f2f2f2;
        position: absolute;
        bottom: -35px;
        left: 0;
    }


    /* 全局提示信息 */
    .alert-hook{
        display: none;
        position: fixed;
        top: 62px;
        left: 0;
        z-index: 2;
        width: 100%;
        height: 35px;
        line-height: 35px;
        text-align: center;
        color: #fff;
        font-size: 12px;
        background: rgba(7, 17, 27, 0.5);
    }