基于VueJs加载更多控件实现

最近在研究vuejs上拉加载更多实现方案,上网找了下这方面的文章和代码貌似不是太多,而且逻辑实现并不太清晰,于是自己结合了前人的经验自己整合了下总结下经验.
上拉加载更多实现思路最关键的就是如何识别手指滑动操作,如果不是用vuejs,可以用html的onscroll函数来监听滑动的位置来实现,如果是基于vuejs,直接在标签里用onscroll事件是没用,这个具体没有研究清楚.下面就讲讲vuejs的方案,先贴出代码:

//scroll.vue
<template lang="html">
    <div class="yo-scroll"  @touchstart="touchStart($event)"
         @touchmove="touchMove($event)" @touchend="touchEnd($event)" >
        <section class="inner">
            <!-- 使用时外面的标签会填在里面 -->
            <slot>
            </slot>
            <!-- 保持加载更多条在最下面 -->
            <footer class="load-more">
                <slot name="load-more">
                    <span>{{loadMoreText}}</span>
                </slot>
            </footer>
            <div class="nullData" v-show="dataList.noFlag">暂无更多数据</div>
        </section>
    </div>
</template>
<style lang="less">
    /*:class="{'down':(state===0),'up':(state==1),refresh:(state===2),touch:touching}"*/
    .yo-scroll {
        font-size: 24px;
        position: absolute; //关键
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        overflow: auto; //关键
        z-index: 100;
        height: auto;
        -webkit-overflow-scrolling: touch;
        .inner { position: absolute;
            /*top: -5rem;*/
            width: 100%;
            height: auto;
            transition-duration: 300ms;
            .load-more { height: 5rem;
                line-height: 5rem;
                display: flex;
                text-align: center;
                align-items: center;
                justify-content: center;
                display: none;
            }
            .nullData {//暂无更多数据样式
                font-size: 26px;
                color: #999999;
                height: 100px;
                line-height: 100px;
                text-align: center;
            }
            .down-tip,
            .refresh-tip,
            .up-tip {
                display: none;
            }
        }
    }

    .yo-scroll.touch .inner {
        transition-duration: 0;
    }

    .yo-scroll.down .down-tip {
        display: block;
    }

    .yo-scroll.up .up-tip {
        display: block;
    }

    .yo-scroll.refresh .refresh-tip {
        display: block;
    }
</style>
<script>
    export default {
        props: {
            offset: {
                type: Number,
                default: 100 //默认高度
            },
            enableLoadMore: {
                type: Boolean,
                default: true
            },
            dataList: {
                default: false,
                required: false
            },
            onLoadMore: {
                type: Function,
                default: undefined,
                require: false
            }
        },
        data() {
            return {
                startX: 0,
                startY: 0,
                touching: false,
                isLoading: false,
                loadMoreText: "上拉加载更多"
            }
        },
        methods: {
            touchStart(e) {
                this.startY = e.targetTouches[0].pageY;
                this.startX = e.targetTouches[0].pageX;
                this.startScroll = this.$el.scrollTop || 0;
                this.touching = true; //留着有用，不能删除
                this.dataList.noFlag = false;

            },
            //滑动中
            touchMove(e) {
                if(!this.enableLoadMore || this.dataList.noFlag || !this.touching) {
                    return
                }
                let diff = e.targetTouches[0].pageY - this.startY - this.startScroll
                if(diff > 0) {
                    e.preventDefault()
                }
                this.loadMoreText = '上拉加载更多'
                this.$el.querySelector('.load-more').style.display = 'block';
            },

            touchEnd(e) {
              if (this.isLoading) {
                    return;
                }
                this.touching = false

                //用于判断滑动是否在原地 ----begin
                let endX = e.changedTouches[0].pageX,
                    endY = e.changedTouches[0].pageY,
                    dy = this.startY - endY,
                    dx = endX - this.startX;

                //如果滑动距离太短
                if(Math.abs(dx) < 2 && Math.abs(dy) < 2) {
                    // console.log("滑动距离太短")
                    let more = this.$el.querySelector('.load-more')
                    more.style.display = 'none'; //隐藏加载条
                    return;
                }

                if(!this.enableLoadMore || this.isLoading) {
                    let more = this.$el.querySelector('.load-more')
                    more.style.display = 'none'; //隐藏加载条
                    return
                }

                let outerHeight = this.$el.clientHeight,
                    innerHeight = this.$el.querySelector('.inner').clientHeight,
                    scrollTop = this.$el.scrollTop,
                    bottom = innerHeight - outerHeight - scrollTop;

                if(bottom <= this.offset) {
                    //内容太少
                    this.doLoadMore();
                } else {
                    let more = this.$el.querySelector('.load-more')
                    more.style.display = 'none'; //隐藏加载条
                }
            },

            doLoadMore() {
                this.isLoading = true
                this.loadMoreText = '正在加载'
                this.onLoadMore(this.loadDone);
            },

            loadDone() {
                this.isLoading = false
                let more = this.$el.querySelector('.load-more')
                more.style.display = 'none'; //隐藏加载条

            }
        }
    }
</script>

这里是使用组件的方式实现, @touchstart=”touchStart($event)" @touchmove="touchMove($event)” @touchend=”touchEnd($event) 为布局加上滚动事件,具体实现在script里,touchStart先记录手指按下坐标,touchmove记录手指滑动的距离,判断是否显示更多条,touchEnd判断是否触发加载更多事件,一但达到条件就调用外面传进来的onLoadMore函数,通过外面的调用done来控制是否完成.实现的效果是上拉时显示”下拉加载更多”,手指释放时显示”正在加载”,完成后隐藏控制条.
外面使用的组件代码 :

<template>
  <div>
    <v-scroll :onLoadMore="onLoadMore" :dataList="scrollData">
      <ul>
        <li v-for="(item) in listdata" :key="item.name">{{item.name}}</li>
        <li v-for="(item) in downdata" :key="item.name">{{item.name}}</li>
      </ul>
    </v-scroll>
  </div>
</template>
<style lang="less">
  ul li {
    min-height: 100px;
    line-height: 100px;
    text-align: center;
    border: 1px solid red;
  }
</style>
<script>
  import loadmore from "./scroll.vue";
    export default {
        components: {
            'v-scroll': loadmore
        },
        data() {

            return {
                counter: 1, //当前页
                num: 10, // 一页显示多少条
                pageStart: 0, // 开始页数
                pageEnd: 0, // 结束页数
                listdata: [], // 下拉更新数据存放数组
                downdata: [], // 上拉更多的数据存放数组
                scrollData:{
                    noFlag: false //暂无更多数据显示
                }
            }
        },
        mounted: function() {
            this.getList();
        },
        methods: {
            getList() {
                var response = []
                for(let i = 0; i < 60; i++) {
                    response.push({
                        name: i
                    })
                }
                this.listdata = response.slice(0, this.num);
            },

            onLoadMore(done) {
                this.counter++;
                let end = this.pageEnd = this.num * this.counter;
                let i = this.pageStart = this.pageEnd - this.num;

                setTimeout(() => {
                    for(i; i < end; i++) {
                        if(i >= 30) {
                            //走完数据调用方法
                            // this.scrollData.noFlag = true;
                            break;
                        } else {
                            this.downdata.push({
                                name: i + "==="
                            })
                            // more.style.display = 'none'; //隐藏加载条
                        }
                    }
                    done();
                }, 2000);
            }
        }

    }
</script>

实现的完整代码在github上可以找到:https://github.com/Cmdmac/vuejs-loadmore.git