better-scroll滑动插件使用，上拉加载

1.安装
npm install better-scroll@next -S

2.使用

import BScroll from '@better-scroll/core';
import ScrollBar from '@better-scroll/scroll-bar';

private bscroll: BScroll | null;

// 使用滚动条 并且修改滚动条样式
ScrollBar.prototype['_createIndicatorElement'] = direction => {
    const scrollbarEl = document.createElement('div');
    const indicatorEl = document.createElement('div');
    scrollbarEl.style.cssText = 'position:absolute;z-index:9999;pointerEvents:none';
    indicatorEl.style.cssText = 'box-sizing:border-box;position:absolute;background:#ffecba;border:0;border-radius:0.08rem;';
    indicatorEl.className = 'bscroll-indicator';
    if (direction === 'horizontal') {
        scrollbarEl.style.cssText += ';height:7px;left:2px;right:2px;bottom:0';
        indicatorEl.style.height = '100%';
        scrollbarEl.className = 'bscroll-horizontal-scrollbar';
    } else {
        scrollbarEl.style.cssText += ';width:0.04rem;bottom:0px;top:0px;right:0px';
        indicatorEl.style.width = '100%';
        scrollbarEl.className = 'bscroll-vertical-scrollbar';
    }
    scrollbarEl.style.cssText += ';overflow:hidden';
    scrollbarEl.appendChild(indicatorEl);
    return scrollbarEl;
};
BScroll.use(ScrollBar);

// 初始化BScroll，并监听scrollEnd事件
const ele = document.getElementById(this.id) as HTMLElement;
this.$nextTick(() => {
    this.bscroll = new BScroll(ele, {
        scrollY: true,
        scrollbar: { fade: false },//滚动条是否一直显示
        click: true,
        useTransition: false,
    });
    this.bscroll.on('scrollEnd', pos => {
        // 滚动到底部事件，用于上拉加载
                // 设置距离50 使加载更快更灵敏
        if (this.bscroll && pos.y <= this.bscroll.maxScrollY + 50) {
            this.pullUpEvent();
        }
    });
});

private async pullUpEvent() {
    if (this.ismore) {
        return;
    }
    const res = await msg.get({ offsetTime: this.offsetTime });
    this.list = this.list.concat(res.data.prays);
    if (res.data.prays.length) {
        this.offsetTime = res.data.prays[res.data.prays.length - 1].receiveTime;
    } else {
                // 没有更多了
        this.ismore = true;
    }
    this.$nextTick(() => {
                //刷新滑动
        this.bscroll?.refresh();
    });
}

踩坑：安卓手机，在数据较多情况下，滑动渲染慢

解决办法：useTransition此参数设置为false，不要用此动画属性

3.样式修改

/deep/.bscroll-indicator {
    background: #ffecba !important;
    border: none !important;
}
/deep/.bscroll-vertical-scrollbar {
    width: 6px !important;
}