vue从入门到放弃--- 滚动加载

这里用的是
饿了么Mint-Ul里的Infinite scroll.
需要后台 返回一个总数

<template>    <div>        <div class="liveQA_top" v-if="!noJob">            <div class="liveQA_top_tit">                <p class="liveQA_tit">                    <span>                        职位列表                    </span>                </p>            </div>            <div class="search">                <div id="lt">                    <input type="text" placeholder="搜索职位" class="liveQA_searchInp" v-model="search"                    @keyup.enter="clearJob">                </div>                <div id="rt">                    <a class="liveQA_searchbtn" @click="clearJob()">                        搜索                    </a>                </div>            </div>        </div>        <div class="live_career">            <div v-if="noJob" class="nojob">                暂无职位            </div>            <div class="page-infinite">                <div class="page-infinite-wrapper">                    <ul class="page-infinite-list" v-infinite-scroll="loadMore" infinite-scroll-disabled="jobloading"                    infinite-scroll-distance="50">                        <li v-for="(career,index) in careers" class="page-infinite-listitem">                            <a v-bind:href="careers[index].PositionURL">                                <div class="live_career_box">                                    <div class="live_career_tit">                                        <span>                                            {{ careers[index].JobName }}                                        </span>                                        <a class="live_career_href" v-bind:href="careers[index].PositionURL">                                            申请                                        </a>                                    </div>                                    <div class="live_career_txt">                                        {{ careers[index].CityName}}　{{careers[index].WorkingExp}}　{{careers[index].EduLevelT}}                                    </div>                                </div>                            </a>                        </li>                        <div class="clear"></div>                    </ul>                    <!--Careers-->                    <div class="loadwrap" ref="loadwrap" style="height:1.7rem;" v-if="showLoading">                        <p v-if="allLoaded" class="nolive">                            我是有底线的                        </p>                        <p v-if="loadGif" class="page-infinite-loading">                            加载中...                            <mt-spinner type="fading-circle">                            </mt-spinner>                        </p>                    </div>                    <div class="clear">                    </div>                </div>            </div>        </div>    </div></template><script>    import {liveCareer}from '@/api';    export default {        data() {            return {                careers:[],                search: this.search,                jobloading: false,                //无限滚动被禁用                page: 2,                //传递页数                totrue: false,                //控制停止滚动                noJob: false,                //没有数据                showLoading: true,                //是否显示加载中                allLoaded: false,                //加载完毕                loadGif: false                //loading图显示隐藏            };        },        methods: {            /* 关键字搜索职位 */            clearJob() {                this.careers = [];                this.page = 1;                this.totrue = true;                this.jobloading = false;                this.loadMore();            },            /* 加载第一页 */            async liveCareer() {                this.careers = [];                let params = {                    szid: this.$route.query.SzId == "null" ? "": this.$route.query.SzId,                    xzid: this.$route.query.XzId == "null" ? "": this.$route.query.XzId,                    pageNum: 1,                    kw: this.search ? this.search: "",                    type: 2                }                let res = await liveCareer(params);                if (res.JobList.length > 0) {                    this.careers = res.JobList;                    if (res.TotalRowCount <= 10) {                        this.allLoaded = true;                        this.noJob = false;                    }                    if (res.PageCount > 1) {                        this.showLoading = true;                        this.loadGif = true;                        this.totrue = true;                    }                } else {                    this.showLoading = false;                    this.noJob = true;                }            },            /* 加载职位 */            loadMore() {                this.jobloading = true;                let vm = this;                if (this.totrue) {                    let params = {                        szid: this.$route.query.SzId == "null" ? "": this.$route.query.SzId,                        xzid: this.$route.query.XzId == "null" ? "": this.$route.query.XzId,                        pageNum: this.page,                        kw: this.search ? this.search: "",                        type: 2                    }                    liveCareer(params).then(res =>{                        var list1 = res.JobList;                        var count = res.PageCount;                        if (vm.careers.length == 0) {                            vm.careers = list1;                        } else {                           if (this.page<= parseInt(count)){                            var list2 = vm.careers;                            vm.careers = list2.concat(list1);                            } else {                                this.totrue = false;                                this.loadGif = false;                                this.allLoaded = true;                            }                        }                       this.page++;                       setTimeout(() => {                          vm.jobloading = false;                       }, 1000);                     });                } else {                    this.jobloading = false;                }            }        },        created() {            this.liveCareer();        }    }</script>

图片错误处理

  <img :src="live.PicUrl || proxyImg" class="livelogoUrl" :onerror="proxyImgError">  export default {    data() {      return {        lives:[],        proxyImg:require('../assets/videoface.jpg'),        proxyImgError: 'this.src="' + require('../assets/videoface.jpg') + '"'      };    },