better-scroll的使用(上拉加载更多)

1、安装、引入及使用文档

npm i better-scroll -S

import BScroll from 'better-scroll'

2、dom结构及样式：

better-scroll作用在外层容器（.wrap）上，外层容器要给一个高度(如果.wrap的外层容器有高度，直接100%就行)，且溢出隐藏；内层容器高度由内容撑起来，确保第一次加载的内容高度（比如十条数据的高度）大于外层容器高度，不然上拉加载更多无效（不会触发上拉事件）

<div class="wrap" ref="my_scroll">
    <ul>
        <li>xxx1</li>
        <li>xxx2</li>
        <li>xxx3</li>
    </ul>
</div>
<style>
    .wrap{
        height:100%;
        overflow-y:hidden;
    }
</style>

3、better-scroll初始化，并绑定上拉事件：

vuecli项目中需要在dom加载完成后执行初始化，上拉事件的回调执行需要判断是否已经没有更多数据上拉了

this.$nextTick(()=>{
    this.myScroll = new BScroll(this.$refs.my_scroller,{
        pullUpLoad: {
            threshold: -20
        },
        click: true
    });
    this.myScroll.on('pullingUp',()=>{
        if(!this.pullingUpOver){
            this.getInfinitData()
        }
    });
});

4、上拉执行的操作

getInfinitData(){
    queryDataListApi(params).then(res=>{
        //页码加1
        this.pageNum += 1;
        //如果加1后的页码乘以每页展示条数大于等于总条数
        if(this.pageNum*10 >= res.total){
            this.myScroll.finishPullUp();
            //关闭上拉加载功能
            this.myScroll.closePullUp();
            //设置全局变量pullingUpOver，标记已经不能加载更多了
            this.pullingUpOver = true;
            return
        }
        //往数组的末尾压入查询出来的数据
        this.dataList = [...this.dataList,...res.list]
        //此方法告诉 better-scroll 数据已加载
        this.myScroll.finishPullUp();
        //dom结构发生变化，需要重新计算better-scroll，确保滚动效果正常
        this.myScroll.refresh();
    });
}

better-scroll的使用(上拉加载更多)

浏览过的版块