js上拉加载代码

    下面这段代码，是我爱模板网在做webapp和h5经常用到的基于vue的上拉加载显示更多的代码，其中，data里面的参数都介绍的非常详细了，func.api是封装的ajax方法，apiConfig.getFollowMemberFollowList()是对应的接口地址配置，Vue.prototype.func = func是将常用的方法封装的一个js文件，追加的vue中，方便在vue中直接使用func里面的方法。
    因为这个vue是script方法引入的，所以func没有采用导入的方式使用：

<div v-if="list.length > 0" class="cunsultantUl" v-for="(vo,i) in list" :key="i">
    <div class="cunsultantList">
        <img :src="vo.ryxyMember.headPortrait">
        <div>
            <ul class="cunsultant_infor">
                <li>{{vo.ryxyMember.fullName || vo.ryxyMember.nickname || vo.ryxyMember.account}}</li>
                <li></li>
            </ul>
            <p class="certificate overflow-hidden">{{vo.ryxyMember.personalizedSignature}}</p>
        </div>
    </div>
</div>
<div class="noData" v-if="list.length === 0">
    <img src="../no-data.png">
    <p>暂无内容</p>
</div>

<script type="text/javascript">
initVue();

//初始化vue
function initVue() {
    'use strict';
    Vue.prototype.func = func;
    window.rootVue = new Vue({
        el: '#rootWrap',
        data: {
            pageNumber: 1, // 第几页,要查第几页的数据就传几,默认是第一页
            pageSize: 10, // 页大小,即每页最多展示的数据条数,默认是20
            totalCount: 0, // 接口返回的总数
            totalPage: 0, // 计算总页数
            is_scroll: true,// 上拉加载相关
            list:[],  //列表数据
        },
        created: function() {
            var that = this;
            this.getList();
        },
        methods: {
            // 上拉加载方法
            onScroll: function() {
                var that = this;
                var innerHeight = document.querySelector('#rootWrap').clientHeight || document.body.clientHeight;
                var outerHeight = document.documentElement.clientHeight
                var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
                if(outerHeight + scrollTop >= innerHeight) {
                    if(that.is_scroll) {
                        // 如果已经没有更多可加载了 这里直接return掉
                        if(that.pageNumber >= that.totalPage) {
                            return
                        }
                        // 加载更多数据
                        that.pageNumber++;
                        that.getList();
                        that.is_scroll = false;
                    }
                }
            },

            // 获取关注会员接口
            getList: function() {
                var that = this;
                // 登录成功后才可以
                if(func.getUserId()) {
                    func.api(apiConfig.getFollowMemberFollowList(), {
                        "pageNumber": that.pageNumber,
                        "pageSize": that.pageSize,
                        "memberId": func.getUserId(),
                    }, function(ret) {
                        if(ret.code == 0) {
                            // 根据总条数计算总页数
                            that.totalCount = ret.data.totalCount;
                            // 如果总数除以pageSize 余数为0 说明没有下一页了
                            if(ret.data.totalCount % that.pageSize == 0) {
                                that.totalPage = parseInt(ret.data.totalCount / that.pageSize);
                            } else {
                                that.totalPage = parseInt((ret.data.totalCount / that.pageSize)) + 1;
                            }
                            var resultList = ret.data.list; // 接口返回的列表数据
                            // 如果是第一页 覆盖列表   如果是上拉加载的 直接拼接在后面
                            if(that.pageNumber == 1) {
                                that.memberList = resultList;
                            } else {
                                that.memberList = that.memberList.concat(resultList);
                            }
                            // 过滤没有消息的数据
                            var newList = [];
                            for(var i = 0; i < that.memberList.length; i++) {
                                if(that.memberList[i].ryxyMember) {
                                    newList.push(that.memberList[i]);
                                }
                            }
                            that.memberList = newList;
                            that.is_scroll = true;
                        }
                    }, function(error) {});
                }
            },

        },
        mounted: function() {
            //上拉滚动监听
            window.addEventListener('scroll', this.onScroll)
        },
    });
};
</script>
</html>