vue2+better-scroll实现列表上拉刷新下拉加载功能

dom结构

 <main ref="wrapper">
            <div class="order_list">
                <div class="down">
                    {{ pulldownMsg }}
                </div>
                <div class="up" v-if="orderList.length > 7">
                    <van-loading v-if="!hasMoreData" size="24px">加载中...</van-loading>
                    <p v-else>已经显示全部了</p>
                </div>
                <div class="order_title">
                    {{ orderListType === 'my' ? '我的列表' : '组内列表' }}
                </div>
                <div class="list" ref="orderList" v-if="orderList.length > 0">
                    <OrderItem v-for="item in orderList" :key="item.id" :order="item"></OrderItem>
                </div>
                <van-empty v-else description="暂无数据" />
            </div>
        </main>

 注意！！！ 一定要给bsroll绑定的父级元素明确的高度

import BScroll from 'better-scroll';

初始化

放在mounted里

// 初始化better-scroll
        initBScroll() {
            this.$nextTick(() => {
                this.scroll = new BScroll(this.$refs.wrapper, {
                    scrollY: true,
                    click: true,
                    probeType: 3,
                });
                this.bindScrollEvents();
            });
        },

上拉刷新

        bindScrollEvents() {
            this.scroll.on('touchEnd', async (pos) => {
                if (pos.y > 40) {
                    await this.getData();
                    this.pulldownMsg = "下拉刷新";
                } else if (pos.y < (this.scroll.maxScrollY - 30)) {
                    await this.loadMoreOrders();
                }
            });
            this.scroll.on('scroll', (pos) => {
                if (pos.y > 40) {
                    this.pulldownMsg = "释放立即刷新";
                } else {
                    this.pulldownMsg = "下拉刷新";
                }
            });
        },

下拉加载
 

async loadMoreOrders() {
            if (!this.hasMoreData) {
                return
            }
            this.isLoading = true;

            this.pageNo++;
            const newOrders = await this.fetchData({ pageNo: this.pageNo });
            if (newOrders.length === 0) {
                this.pageNo--;
                this.hasMoreData = false;
                return
            }
            this.orderList = [...this.orderList, ...newOrders];
            this.isLoading = false;
            this.$nextTick(() => {
                this.scroll.refresh();
            });
        },

css
一定要给定被绑定的dom一个高度

main {
    flex: 1;
    overflow: hidden;
}