移动端分页（懒加载,三个菜单切换在Vue中应用）

<template>
    <div id="historicalEvaluation">
        <headMod :pageTitle="pageTitle"></headMod>
        <div class="historicalEvaluationWarpHead">
            <div class="historical-evaluation-title">
                <span class="evaluation-score">评价得分</span>
                <el-rate
                  v-model="value5"
                  disabled
                  show-score
                  text-color="#ff9900"
                  score-template="{value}分">
                </el-rate>
            </div>
            <div class="historical-evaluation-center-head">
                <ul class="nav">
                    <li v-for="(item,index) in listItem" :key="item.index" :class="{active:num == index}" @click="seletMe(index,item)">{ {item.name}}</li>
                </ul>
            </div>
        </div>    
        <div class="historicalEvaluationWarp" ref="viewBox">
            <div class="historical-evaluation-center" >
                <div class="historical-evaluation-center-bottom" >
                       <ul class="historical-evaluation-center-ul">
                           <li class="mui-table-view-cell historical-evaluation-center-li"
                                v-for="(item,index) in dataItem"
                                :key="item.index" >
                            <div class="historical-evaluation-center-li-div">
                                <span class="historical-evaluation-name">{ {item.customername}}</span>
                                <span class="historical-evaluation-data">{ {item.endtimes}}</span>
                            </div>
                            <div class="historical-evaluation-describe" v-if="item.context != ''">{ {item.context}}</div>
                            <div class="historical-evaluation-describe" v-else>此用户未填写评价内容</div>
                        </li>
                       </ul>
                    <ul class="historical-evaluation-center-ul" v-show="!showNoneData">
                        <li class="">
                            <div class="alert-none-data">
                                暂无数据
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import headMod from './head_mod'//头部标题组件
    export default {
        name: 'testHistoricalEvaluation',
        data () {
            return {
                pageTitle: '历史评价',
                selected: '0',
                value5: 0,
                dataItem: [],//展示数据
                endTime: '',//展示时间                
                allLoaded: false,
                bottomText: '上拉加载更多...',