SOURCE

window.vm = new Vue({
    el:'#app',
    data:{
        dataList:[],    //数据列表
        activeTab: 1,   //当前导航
        curPage: 1,     //页数
        viewNumber: 20, //每页请求条数
        totalReqCount:0,//接口请求计数器
        finished: false,
        loading: false,
        empty: true,
        loadError: false,
        songList: []
    },
    methods:{
        clickEmptyBtn(){
            alert(11111)
            console.log(1111111)
        },
        getSongList(){
            vv.clientAjax( {
                url: 'https://music.51vv.com/sodin/backgroud/collectSongList.htm',
                data:{
                    parameter:{
                     viewNumber: this.viewNumber,
                     curPage: this.curPage
                    }
                },
                success: ( data ) => {
                    this.loading = false;
                    if(data.retCode == 1000){
                        let result = data.result || [];
                        this.songList.concat(result);
                        this.finished = result.length < this.viewNumber;
                        this.curPage += 1;
                    }else{
                        // this.finished = true;
                    }
                    this.empty = !this.videoList.length;
                },
                // 处理加载异常 
                error: () => {
                    this.loadError = true;
                },
            } );
        },

        getSongList1(){
            this.loading = true;
            vv.clientAjax( {
                url: 'https://music.51vv.com/sodin/backgroud/collectSongList.htm',
                data:{
                    parameter:{
                     viewNumber: this.viewNumber,
                     curPage: this.curPage
                    }
                },
                success: ( data ) => {
                    this.loading = false;
                    if(data.retCode != 1000){
                        this.loadError = true;
                        return;
                    }
                    let result = data.result || [];
                    this.songList = this.songList.concat(result);
                    this.finished = result.length < this.viewNumber;
                    this.empty = !this.songList.length;
                    this.curPage += 1;
                },
                // 处理加载异常 
                error: () => {
                    console.log(2222)
                    this.loading = false;
                    this.loadError = true;
                },
            } );
        },
        
    }
})

/***
 * 写法一：
    this.loading = false;
    if (data.retCode == 1000 && data.resultList) {
        this.hotValue = data.hotValueTotal;
        this.rankNum = data.rankNum;
        if (data.resultList.length > 0) {
            if (this.curPage == 1) {
                this.articleList = data.resultList;
            } else {
                this.articleList = this.articleList.concat( data.resultList );
            }
        }
        if (data.resultList.length < this.viewNumber) {
            this.finished = true;
        }
        this.curPage += 1;

    } else {
        this.finished = true;
    }
    this.empty = this.articleList.length == 0;
 * 
 * 
    if (data.retCode == 1000) {
        let resultList = data.transGiftList || []
        if(resultList && resultList.length>0){
            if (this.curPage == 1) {
                this.dataList = resultList
            } else {
                this.dataList = this.dataList.concat(resultList);
            }
            this.curPage++;
        }else{
            if(this.curPage == 1) this.empty = true; //空状态
        }
        if (resultList && resultList.length < this.viewNumber) {
            this.finished = true;
        }
        this.loading = false;
    } else {
        this.empty = (this.dataList.length==0)?true:false;
        this.loading = false;
        this.showToast('获取坐骑列表失败');
    }
 * 
 * 
 * 
 * 写法二：
    this.vvListPage.loading = false;
    if (data.retCode == 1000) {
        if (defaultType) {
            this.dataList = [];
        }
        this.curPage += 1;
        const getListItems = data.resultList || [];
        this.dataList = this.dataList.concat(getListItems || []);
        if (this.dataList.length == 0) {
            this.vvListPage.empty = true;
        }
        if (getListItems.length < viewNumber) {
            this.vvListPage.finished = true;
        }
    }
 * 
 * 
    if ( data.isEnd ) { // 0没有下一页数据了，1还有下一页数据
        this.finished = false;
        this.curPage += 1;
    } else if ( this.curPage == 1 && !data.dataList.length ) {
        this.empty = true;
        this.finished = false;
    } else {
        this.empty = false;
        this.finished = true;
    }
    // console.log(data.dataList,'list--------------');
    this.goodsList = this.goodsList.concat( data.dataList );
 * 
 * 
 * 
 * if(data.retCode == 1000) {
        this.contributeObj = data.result;
        this.settlementState = 1;
        if(this.contributeObj.lastSeconds){
            this.initTimer();
        }
        if (data.result.contribute.length == 0) {
            this.empty = true;
            return;
        }
        this.finished = true;
    } else {
        this.empty = true;
        this.finished = true;
    }
*/
  

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document测试</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-size: 20px;
        }
        [v-cloak]{
            display: none;
        }
        .box{
            margin:20px;
            /* border-bottom: 1px solid palevioletred; */
        }
        .title,.active{
            color:red;
        }
    </style>
    <script type="text/javascript" src="//mscjs.letssing.net/wx/m/vv-base/js/flexible.js"></script>

</head>
<body>
    <div id="app" v-cloak>
        <!-- <div class="box">
            <p>1、Tab 切换示例：</p>
            <span v-for="n in 5" @click="tabBtn(n)" :class="{'active':n == activeTab}" style="padding: 0 20px;"> tab{{n}} </span>
        </div> -->
        <vv-list v-model="loading" :finished="finished" :empty="empty" :empty-info="{emptyBtnText:111}" @click-empty-btn="clickEmptyBtn"  :error.sync="loadError" @load="getSongList">
            <div class="listWrap">
                <div class="recordItem" v-for="(item, index) in dataList" :key="index">
                    {{item}}
                </div>
            </div>
        </vv-list>
     </div> 
    <script type="text/javascript" src="https://mscjs.51vv.com/wx/m/vv-base/js/source/??vue-2.6.11.min.js,axios.min.js,vue-i18n-8.28.2.min.js"></script>
    <script type="text/javascript" src="https://mscjs.51vv.com/wx/m/vv-base/js/??vvlib/pic-cdn-cs.js,base.js,jsbridge_proxy_report.min.js,utils/report.js,vvlib/vv_kibana.min.js,vv_ajax.js?v=123"></script>
    <script type="text/javascript" src="https://mscjs.51vv.com/wx/m/components/dist/vue/vv_list.js"></script>

</body>
</html>