基于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
<template>
    <div class="tabbar">
        <div class="wrapper" ref="wrapper">
            <div class="bscroll-container">
                <!-- 刷新提示信息 -->
                <div class="top-tip">
                    <span class="refresh-hook">{{pulldownMsg}}</span>
                </div>
                <!-- 内容列表 -->
                <ul class="content">
                    <li v-for="item in data">{{item}}</li>
                </ul>
                <!-- 底部提示信息 -->
                <div class="bottom-tip">
                    <span class="loading-hook">{{pullupMsg}}</span>
                </div>
            </div>
        </div>

        <!-- alert提示刷新成功 -->
        <div class="alert-hook" :style="{display: alertHook}">刷新成功</div>
    </div>
</template>

//js
<script>
import BScroll from "better-scroll"
const count = 1
    export default {
        data(){
            return {
                data: [0,1,2,3,4,5,6],
                pulldownMsg: '下拉刷新',
                pullupMsg: '加载更多',
                alertHook: 'none'
            }
        },
        methods: {
            getData() {
                return new Promise(resolve => {  //模拟数据请求
                    setTimeout(() => {
                        const arr = [];
                        for (let i = 0; i < 20; i++) {
                            arr.push(count++)
                        }
                        resolve(arr)
                    }, 1000)
                })
            },
            refreshalert(){   //刷新成功提示
                this.alertHook = 'block';
                setTimeout(()=>{
                    this.alertHook = 'none'
                },1000)
            }
        },
        created(){
            const that = this;
            this.$nextTick(() => {
                    this.scroll = new BScroll(this.$refs.wrapper,{       //初始化better-scroll
                        probeType:1,   //1 滚动的时候会派发scroll事件，会截流。2滚动的时候实时派发scroll事件，不会截流。 3除了实时派发scroll事件，在swipe的情况下仍然能实时派发scroll事件
                        click: true   //是否派发click事件
                    })
                    // 滑动过程中事件
                    this.scroll.on('scroll',(pos)=>{
                        if(pos.y > 30){
                            this.pulldownMsg = '释放立即刷新'
                        }
                    });
                    //滑动结束松开事件
                    this.scroll.on('touchEnd',(pos) =>{  //上拉刷新
                        if(pos.y > 30){
                            setTimeout(()=>{
                                that.getData().then((res)=>{
                                    //刷新数据
                                    that.data = res;
                                    //恢复刷新提示文本值
                                    that.pulldownMsg = '下拉刷新'
                                    //刷新成功后提示
                                    that.refreshalert();
                                    //刷新列表后，重新计算滚动区域高度
                                    that.scroll.refresh();
                                })
                            },2000)
                        } 
                        else if(pos.y<(this.scroll.maxScrollY - 30)){   //下拉加载
                            this.pullupMsg = '加载中。。。';
                            setTimeout(()=>{
                                that.getData().then((res)=>{
                                    //恢复文本值
                                    that.pullupMsg = '加载更多';
                                    that.data = this.data.concat(res);
                                    that.scroll.refresh();
                                })
                            },2000)
                            
                        }
                    })      
            })
        }
    }
</script>

//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);
    }