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

62 阅读 0 评论 41 点赞

我是靠谱客的博主柔弱人生，最近开发中收集的这篇文章主要介绍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();
    });
}