使用mescroll 實現(xiàn)多tab刷新、加載列表

今天做了一個多列表下拉刷新、上拉加載的功能矮烹，用了mescroll這個優(yōu)秀的插件來實現(xiàn)越庇，做成的樣子如下：

github地址：https://github.com/momo-Iwillquit/mescroll-project

微信截圖_20190430164225.png
微信截圖_20190430164014.png

首先參考mescroll官網(wǎng)：http://www.mescroll.com/api.html?v=190426#mescrollvue罩锐。

1、安裝mescroll.js
npm install --save mescroll.js   //不要使用cnpm安裝, 因為更新下來有可能是舊的版本
2. 引入mescroll組件 :
import MescrollVue from 'mescroll.js/mescroll.vue'

剩下的按照官網(wǎng)配置就行了卤唉，官網(wǎng)文檔寫得很清楚涩惑。
代碼很簡單，可以直接拷貝下來運行桑驱。

<template>
    <div>
        <select class="project" v-model="project">
            <option v-for="(pro, index) in projects" :key="index" :value="pro">{{ pro }}</option>
        </select>
        <div class="top-warp">
            <div class="nav">
                <div :class="{'active':pdType==0}" @click="changeTab(0)">房間設(shè)備</div>
                <div :class="{'active':pdType==1}" @click="changeTab(1)">審批</div>
            </div>
        </div>
        <div class="top-warp2">
            <div class="nav2" v-show="pdType==1">
                <div :class="{'active':tabType2==1}" @click="changeTab2(1)"><span>我的待辦</span></div>
                <div :class="{'active':tabType2==2}" @click="changeTab2(2)"><span>我的已辦</span></div>
                <div :class="{'active':tabType2==3}" @click="changeTab2(3)"><span>歷史紀(jì)錄</span></div>
            </div>
            <div class="nav3" v-show="pdType==0">
                <div class="search" @click="focusInput">
                    <input v-model="key" @input='search' placeholder="輸入房間名稱搜索" id="search">
                    <img src="../assets/search-icon.png">
                </div>
            </div>
        </div>
        <mescroll-vue ref="mescroll" :up="mescrollUp" @init="mescrollInit">
            <ul id="dataList" class="data-list">
                <template v-if="pdType == 0">
                    <li class="data-li-1 clearfix" v-for="dv in dataList" :key="dv.id">
                        <div class="floatL">
                            <span :class="{'status': 'true', 'left':dv.room_status=='逾'}">{{ dv.room_status }}</span>
                            <span class="room-name">{{ dv.room_name }}</span>
                        </div>
                        <div class="floatR">
                            <span class="customer-name">{{ dv.customer_name }}</span>
                            <span class="tel">{{ dv.tel }}</span>
                            <span class="rote"></span>
                        </div>
                    </li>
                </template>
                <template v-if="pdType == 1">
                    <li class="data-li-2" v-for="ap in dataList" :key="ap.id">
                        <div class="line-1"><span>{{ ap.title }}</span><span class="status">{{ ap.status }}</span></div>
                        <div class="line-2"><span>{{ ap.apply_name }}</span>&nbsp;&nbsp;<span>{{ ap.create_time }}</span></div>
                        <div class="line-3"><span>已過去 1 天 2 時 31 分 58 秒 </span></div>
                    </li>
                </template>
            </ul>
        </mescroll-vue>
    </div>
</template>

<script>
import MescrollVue from 'mescroll.js/mescroll.vue'
import Data1 from '../js/data1'
import Data2 from '../js/data2'
import Data3 from '../js/data3'
import Data4 from '../js/data4'
import utils from "../js/utils";
export default {
    name: 'mescrollComponent',
    components: {
        MescrollVue
    },
    data () {
        return {
            project: '南山科技園店',
            projects: ['南山科技園店', '坂田星火店', '茶光路店'],
            key: '',
            mescroll: null,                 // mescroll實例對象
            mescrollUp: {
                callback: this.upCallback, // 上拉回調(diào)
                page: {
                    num: 0,                // 當(dāng)前頁碼,默認0,回調(diào)之前會加1,即callback(page)會從1開始
                    size: 15               // 每頁數(shù)據(jù)的數(shù)量
                },
                noMoreSize: 5,             // 如果列表已無數(shù)據(jù),可設(shè)置列表的總數(shù)量要大于等于5條才顯示無更多數(shù)據(jù);避免列表數(shù)據(jù)過少(比如只有一條數(shù)據(jù)),顯示無更多數(shù)據(jù)會不好看
                toTop: {
                    src: 'http://www.mescroll.com/img/mescroll-totop.png' // 回到頂部按鈕的圖片路徑,支持網(wǎng)絡(luò)圖
                },
                empty: {                   // 列表第一頁無任何數(shù)據(jù)時,顯示的空提示布局; 需配置warpId才生效;
                    warpId: 'dataList',    // 父布局的id;
                    icon: 'http://www.mescroll.com/img/mescroll-empty.png', // 圖標(biāo),支持網(wǎng)絡(luò)圖
                    tip: '暫無相關(guān)數(shù)據(jù)~',   // 提示
                },
                lazyLoad: {
                    use: true              // 是否開啟懶加載,默認false
                }
            },
            dataList: [],                  // 列表數(shù)據(jù)
            pdType: 0,                     // 菜單
            tabType2: 0
        }
    },
    watch: {
        "project": {
            handler() {
                this.key = '';
                this.changeTab(this.tabType2, true);
            }
        },
    },
    beforeRouteEnter (to, from, next) { // 如果沒有配置回到頂部按鈕或isBounce,則beforeRouteEnter不用寫
        next(vm => {
            // 找到當(dāng)前mescroll的ref,調(diào)用子組件mescroll-vue的beforeRouteEnter方法
            vm.$refs.mescroll && vm.$refs.mescroll.beforeRouteEnter() // 進入路由時,滾動到原來的列表位置,恢復(fù)回到頂部按鈕和isBounce的配置
        })
    },
    beforeRouteLeave (to, from, next) { // 如果沒有配置回到頂部按鈕或isBounce,則beforeRouteLeave不用寫
        // 找到當(dāng)前mescroll的ref,調(diào)用子組件mescroll-vue的beforeRouteEnter方法
        this.$refs.mescroll && this.$refs.mescroll.beforeRouteLeave() // 退出路由時,記錄列表滾動的位置,隱藏回到頂部按鈕和isBounce的配置
        next()
    },
    methods: {
        focusInput () {
            document.getElementById('search').focus();
        },
        search: utils.debounce(function() {
            this.changeTab(0, true);
        }),
        // mescroll組件初始化的回調(diào),可獲取到mescroll對象
        mescrollInit (mescroll) {
            this.mescroll = mescroll
        },
        // 上拉回調(diào) page = {num:1, size:10}; num:當(dāng)前頁 ,默認從1開始; size:每頁數(shù)據(jù)條數(shù)(可配置),默認10
        upCallback (page, mescroll) {
            // 模擬聯(lián)網(wǎng)
            if(this.pdType == 0) {
                this.getListDataFromNet1(this.pdType, page.num, page.size, (arr) => {
                    // 如果是第一頁需手動制空列表
                    if (page.num === 1) this.dataList = []
                    // 把請求到的數(shù)據(jù)添加到列表
                    this.dataList = this.dataList.concat(arr)
                    // 數(shù)據(jù)渲染成功后,隱藏下拉刷新的狀態(tài)
                    this.$nextTick(() => {
                        mescroll.endSuccess(arr.length)
                    })
                }, () => {
                    // 聯(lián)網(wǎng)異常,隱藏上拉和下拉的加載進度
                    mescroll.endErr()
                })
            }
            if(this.pdType == 1) {
                this.getListDataFromNet2(this.pdType, page.num, page.size, (arr) => {
                    // 如果是第一頁需手動制空列表
                    if (page.num === 1) this.dataList = []
                    // 把請求到的數(shù)據(jù)添加到列表
                    this.dataList = this.dataList.concat(arr)
                    // 數(shù)據(jù)渲染成功后,隱藏下拉刷新的狀態(tài)
                    this.$nextTick(() => {
                        mescroll.endSuccess(arr.length)
                    })
                }, () => {
                    // 聯(lián)網(wǎng)異常,隱藏上拉和下拉的加載進度
                    mescroll.endErr()
                })
            }
        },

        changeTab2(type) {
            this.changeTab(type, true);
        },

        // 切換菜單
        changeTab (type, flag) {
            if (this.pdType !== type || flag) {
                this.pdType = type == 0 ? 0 : 1;
                this.tabType2 = type;
                this.dataList = []// 在這里手動置空列表,可顯示加載中的請求進度
                this.mescroll.resetUpScroll() // 刷新列表數(shù)據(jù)
            }
        },

        /* 聯(lián)網(wǎng)加載列表數(shù)據(jù)
        在您的實際項目中,請參考官方寫法: http://www.mescroll.com/api.html#tagUpCallback
        請忽略getListDataFromNet的邏輯,這里僅僅是在本地模擬分頁數(shù)據(jù),本地演示用
        實際項目以您服務(wù)器接口返回的數(shù)據(jù)為準(zhǔn),無需本地處理分頁.
        * */
        getListDataFromNet1 (pdType, pageNum, pageSize, successCallback, errorCallback) {
            // 延時一秒,模擬聯(lián)網(wǎng)
            setTimeout(() => {
                // axios.get("xxxxxx", {
                //   params: {
                //     num: page.num, //頁碼
                //     size: page.size //每頁長度
                //   }
                // }).then((response)=> {
                var listData = []
                for (var i = (pageNum - 1) * pageSize; i < pageNum * pageSize; i++) {
                    if (i === Data1.length) break
                    listData.push(Data1[i])
                }
                // 回調(diào)
                successCallback(listData)
                // }).catch((e)=> {
                //   //聯(lián)網(wǎng)失敗的回調(diào),隱藏下拉刷新和上拉加載的狀態(tài);
                //   errorCallback&&errorCallback()
                // })
            }, 1000)
        },

        getListDataFromNet2 (pdType, pageNum, pageSize, successCallback, errorCallback) {
            // 延時一秒,模擬聯(lián)網(wǎng)
            setTimeout(() => {
                // axios.get("xxxxxx", {
                //   params: {
                //     num: page.num, //頁碼
                //     size: page.size //每頁長度
                //   }
                // }).then((response)=> {
                let listData = []
                let ndata = [];
                if (this.tabType2 == 1) ndata = Data2;
                if (this.tabType2 == 2) ndata = Data3;
                if (this.tabType2 == 3) ndata = Data4;
                for (let j = (pageNum - 1) * pageSize; j < pageNum * pageSize; j++) {
                    if (j === ndata.length) break;
                    listData.push(ndata[j]);
                }
                // 回調(diào)
                successCallback(listData)
                // }).catch((e)=> {
                //   //聯(lián)網(wǎng)失敗的回調(diào),隱藏下拉刷新和上拉加載的狀態(tài);
                //   errorCallback&&errorCallback()
                // })
            }, 1000)
        }
    }
}
</script>

<style scoped>
*{ margin:0; padding:0; outline:0; font-family: 'PingFang SC', 'Helvetica Neue', 'Helvetica', 'STHeitiSC-Light', "Microsoft YaHei", 'Arial', sans-serif;}
ul,dl,ol,li,dt,dd{list-style:none;}
input{-webkit-appearance:none;border:none;outline:none; font-size:14px;}
.floatL{ display:inline; float:left;}
.floatR{ display:inline; float:right;}
.clearfix:before, .clearfix:after{ content:""; display:table; }
.clearfix:after { clear:both; }

/*以fixed的方式固定mescroll的高度*/
.mescroll {
    position: fixed;
    top: 120px;
    bottom: 0;
    height: auto;
}
.project {
    width: 100%;
    height: 30px;
    line-height: 30px;
    border: 1px solid #ccc;
}
.top-warp {
    position: relative;
    z-index: 9990;
    width: 100%;
    height: 40px;
    background-color: white;
    border-bottom: 1px solid #ccc;
}
.top-warp .tip {
    font-size: 14px;
    height: 40px;
    line-height: 40px;
    text-align: center;
}
.top-warp .nav {
    text-align: center;
    height: 40px;
    background: white;
}
.top-warp .nav > div {
    float: left;
    width: 50%;
    line-height: 40px;
    font-size: 14px;
}
.top-warp .nav div:first-child {
    border-right: 1px solid #ccc;
    box-sizing: border-box;
}
.top-warp .nav .active {
    color: #0099FF;
}
.top-warp2 {
    position: relative;
    z-index: 9990;
    width: 100%;
    height: 40px;
    background-color: white;
}
.top-warp2 .nav2 {
    text-align: center;
    height: 40px;
    background: white;
    border-bottom: 1px solid #ccc;
    padding: 0 30px;
}
.top-warp2 .nav2 > div {
    float: left;
    width: 33%;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
}
.top-warp2 .nav2 > div span {
    display: inline-block;
    border: 1px solid #ccc;
    height: 20px;
    line-height: 20px;
    padding: 0 10px;
    border-radius: 25px;
    font-size: 12px;
}
.top-warp2 .nav2 .active {
    color: #0099FF;
}
.top-warp2 .nav3 {
    height: 40px;
    line-height: 40px;
    text-align: center;
    margin: 0 10px;
    border-bottom: 1px solid #eee;
}
.top-warp2 .nav3 .search {
    border: 1px solid #eee;
    margin-top: 7px;
    box-sizing: border-box;
    border-radius: 25px;
    text-align: left;
    padding-left: 20px;
    height: 30px;
    line-height: 30px;
}
.top-warp2 .nav3 .search input {
    width: 85%;
}
input::-webkit-input-placeholder {
    color: #9e9e9e;
}
input:-moz-placeholder {
    color: #9e9e9e;
}
input::-moz-placeholder {
    color: #9e9e9e;
}
input::-ms-input-placeholder {
    color: #9e9e9e;
}
.top-warp2 .nav3 .search img {
    width: 20px;
    float: right;
    margin-right: 5px;
    margin-top: 5px;
}
/*展示上拉加載的數(shù)據(jù)列表*/
#dataList0 {
    padding: 0 10px;
}
.data-li-1 {
    position: relative;
    height: 50px;
    line-height: 50px;
    padding: 0 8px;
    border-bottom: 1px solid #eee;
    overflow: hidden;
}
.data-li-1 span {
    display: inline-block;
    vertical-align: middle;
}
.data-li-1 .status {
    color: #fff;
    font-size: 12px;
    background: #0099FF;
    border-radius: 3px;
    margin-right: 5px;
    height: 20px;
    line-height: 20px;
    padding: 0 4px;
}
.data-li-1 .status.left {
    background: red;
}
.data-li-1 .room-name {
    color: #000;
    margin-right: 10px;
}
.data-li-1 .customer-name {
    color: #666;
    margin-right: 5px;
}
.data-li-1 .tel {
    color: #666;
    margin-right: 10px;
}
.data-li-1 .rote {
    width: 6px;
    height: 6px;
    border-top: 1px solid #666;
    border-right: 1px solid #666;
    transform: rotate(45deg);
}

.data-li-2 {
    position: relative;
    padding: 8px 15px;
    border-bottom: 1px solid #eee;
    font-size: 12px;
}
.data-li-2 .line-1, .data-li-2 .line-2 {
    margin-bottom: 10px;
}
.data-li-2 .line-3 {
    text-align: right;
    color: #666666;
}
.data-li-2 .line-1 {
    color: #000;
}
.data-li-2 .line-1 .status {
    float: right;
    color: #0099FF;
}
.data-li-2 .line-2 {
    color: #666666;
}
.FC_ec6b39 {
    color: #ec6b39;
}
.FC_999999 {
    color: #999999;
}
</style>

引入的數(shù)據(jù)data1竭恬、data2、data3熬的、data4如下：

//data1.js
[
    {
        "id": 1,
        "room_name": "1棟101",
        "customer_name": "李偉偉",        
        "tel": "13010657807",
        "room_status": "租"
    },
    {
        "id": 2,
        "room_name": "1棟102",
        "customer_name": "",        
        "tel": "",
        "room_status": "租"
    },
    {
        "id": 3,
        "room_name": "1棟103",
        "customer_name": "李富貴",        
        "tel": "13010657807",
        "room_status": "逾"
    },
    {
        "id": 4,
        "room_name": "1棟104",
        "customer_name": "張曉華",        
        "tel": "13010657807",
        "room_status": "租"
    },
    {
        "id": 5,
        "room_name": "1棟105",
        "customer_name": "",        
        "tel": "",
        "room_status": "租"
    },
    {
        "id": 6,
        "room_name": "1棟106",
        "customer_name": "",        
        "tel": "",
        "room_status": "租"
    },
    {
        "id": 7,
        "room_name": "1棟107",
        "customer_name": "李偉偉",        
        "tel": "13010657807",
        "room_status": "逾"
    },
    {
        "id": 8,
        "room_name": "1棟108",
        "customer_name": "",        
        "tel": "",
        "room_status": "逾"
    },
    {
        "id": 9,
        "room_name": "1棟109",
        "customer_name": "李偉偉",        
        "tel": "13010657807",
        "room_status": "租"
    },
    {
        "id": 10,
        "room_name": "1棟1010",
        "customer_name": "",        
        "tel": "",
        "room_status": "租"
    },
    {
        "id": 11,
        "room_name": "1棟1011",
        "customer_name": "李偉偉",        
        "tel": "13010657807",
        "room_status": "租"
    },
    {
        "id": 12,
        "room_name": "1棟1021",
        "customer_name": "李偉偉",        
        "tel": "13010657807",
        "room_status": "租"
    },
    {
        "id": 13,
        "room_name": "1棟1013",
        "customer_name": "",        
        "tel": "13010657807",
        "room_status": "租"
    },
    {
        "id": 14,
        "room_name": "1棟1014",
        "customer_name": "",        
        "tel": "13010657807",
        "room_status": "租"
    },
    {
        "id": 15,
        "room_name": "1棟1015",
        "customer_name": "李偉偉",        
        "tel": "13010657807",
        "room_status": "租"
    },
    {
        "id": 16,
        "room_name": "1棟1016",
        "customer_name": "李偉偉",        
        "tel": "13010657807",
        "room_status": "租"
    },
    {
        "id": 17,
        "room_name": "1棟1017",
        "customer_name": "",        
        "tel": "13010657807",
        "room_status": "租"
    },
    {
        "id": 18,
        "room_name": "1棟1018",
        "customer_name": "李偉偉",        
        "tel": "13010657807",
        "room_status": "租"
    },
    {
        "id": 19,
        "room_name": "1棟1019",
        "customer_name": "李偉偉",        
        "tel": "13010657807",
        "room_status": "租"
    },
    {
        "id": 20,
        "room_name": "1棟1021",
        "customer_name": "李偉偉",        
        "tel": "13010657807",
        "room_status": "租"
    },
    {
        "id": 21,
        "room_name": "1棟1031",
        "customer_name": "",        
        "tel": "13010657807",
        "room_status": "租"
    },
    {
        "id": 22,
        "room_name": "1棟1041",
        "customer_name": "李偉偉",        
        "tel": "13010657807",
        "room_status": "租"
    },
    {
        "id": 23,
        "room_name": "1棟1051",
        "customer_name": "李偉偉",        
        "tel": "13010657807",
        "room_status": "租"
    },
    {
        "id": 24,
        "room_name": "1棟1061",
        "customer_name": "李偉偉",        
        "tel": "13010657807",
        "room_status": "租"
    },
    {
        "id": 25,
        "room_name": "1棟1071",
        "customer_name": "李偉偉",        
        "tel": "13010657807",
        "room_status": "租"
    },
    {
        "id": 26,
        "room_name": "1棟1081",
        "customer_name": "李偉偉",        
        "tel": "13010657807",
        "room_status": "租"
    },
    {
        "id": 27,
        "room_name": "1棟1091",
        "customer_name": "李偉偉",        
        "tel": "13010657807",
        "room_status": "租"
    },
    {
        "id": 28,
        "room_name": "1棟1101",
        "customer_name": "李偉偉",        
        "tel": "13010657807",
        "room_status": "租"
    },
    {
        "id": 29,
        "room_name": "1棟1201",
        "customer_name": "李偉偉",        
        "tel": "13010657807",
        "room_status": "租"
    },
    {
        "id": 30,
        "room_name": "1棟1301",
        "customer_name": "",        
        "tel": "13010657807",
        "room_status": "租"
    },
    {
        "id": 31,
        "room_name": "1棟1401",
        "customer_name": "李偉偉",        
        "tel": "13010657807",
        "room_status": "租"
    },
    {
        "id": 32,
        "room_name": "1棟1501",
        "customer_name": "李偉偉",        
        "tel": "13010657807",
        "room_status": "租"
    },
    {
        "id": 33,
        "room_name": "1棟1601",
        "customer_name": "李偉偉",        
        "tel": "13010657807",
        "room_status": "租"
    }   
]

//data2.js
[
    {
        "id": "1",
        "title": "凍結(jié)租客密碼申請",
        "apply_name": "張君君",
        "date": "2019-04-29 13:29:18",
        "create_time": "2019-04-29 13:29:18",
        "status": "待處理"
    },
    {
        "id": "2",
        "title": "凍結(jié)同住人密碼申請",
        "apply_name": "張君君",
        "date": "2019-04-29 13:29:18",
        "create_time": "2019-04-29 13:29:18",
        "status": "待處理"
    },
    {
        "id": "3",
        "title": "凍結(jié)密碼延期申請",
        "apply_name": "張君君",
        "date": "2019-04-29 13:29:18",
        "create_time": "2019-04-29 13:29:18",
        "status": "待處理"
    },
    {
        "id": "4",
        "title": "凍結(jié)租客密碼申請",
        "apply_name": "張君君",
        "date": "2019-04-01 13:29:18",
        "create_time": "2019-04-01 13:29:18",
        "status": "待處理"
    },
    {
        "id": "5",
        "title": "凍結(jié)租客密碼申請",
        "apply_name": "張君君",
        "date": "2019-04-01 13:29:18",
        "create_time": "2019-04-01 13:29:18",
        "status": "待處理"
    },
    {
        "id": "6",
        "title": "凍結(jié)同住人密碼申請",
        "apply_name": "張君君",
        "date": "2019-04-01 13:29:18",
        "create_time": "2019-04-01 13:29:18",
        "status": "待處理"
    },
    {
        "id": "7",
        "title": "凍結(jié)密碼延期申請",
        "apply_name": "張君君",
        "date": "2019-04-01 13:29:18",
        "create_time": "2019-04-01 13:29:18",
        "status": "待處理"
    },
    {
        "id": "8",
        "title": "凍結(jié)租客密碼申請",
        "apply_name": "張君君",
        "date": "2019-04-01 13:29:18",
        "create_time": "2019-04-01 13:29:18",
        "status": "待處理"
    },
    {
        "id": "9",
        "title": "凍結(jié)租客密碼申請",
        "apply_name": "張君君",
        "date": "2019-04-01 13:29:18",
        "create_time": "2019-04-01 13:29:18",
        "status": "待處理"
    },
    {
        "id": "10",
        "title": "凍結(jié)同住人密碼申請",
        "apply_name": "張君君",
        "date": "2019-04-01 13:29:18",
        "create_time": "2019-04-01 13:29:18",
        "status": "待處理"
    },
    {
        "id": "11",
        "title": "凍結(jié)密碼延期申請",
        "apply_name": "張君君",
        "date": "2019-04-01 13:29:18",
        "create_time": "2019-04-01 13:29:18",
        "status": "待處理"
    },
    {
        "id": "12",
        "title": "凍結(jié)租客密碼申請",
        "apply_name": "張君君",
        "date": "2019-04-01 13:29:18",
        "create_time": "2019-04-01 13:29:18",
        "status": "待處理"
    },
    {
        "id": "13",
        "title": "凍結(jié)租客密碼申請",
        "apply_name": "張君君",
        "date": "2019-04-01 13:29:18",
        "create_time": "2019-04-01 13:29:18",
        "status": "待處理"
    },
    {
        "id": "14",
        "title": "凍結(jié)同住人密碼申請",
        "apply_name": "張君君",
        "date": "2019-04-01 13:29:18",
        "create_time": "2019-04-01 13:29:18",
        "status": "待處理"
    },
    {
        "id": "15",
        "title": "凍結(jié)密碼延期申請",
        "apply_name": "張君君",
        "date": "2019-04-01 13:29:18",
        "create_time": "2019-04-01 13:29:18",
        "status": "待處理"
    },
    {
        "id": "16",
        "title": "凍結(jié)租客密碼申請",
        "apply_name": "張君君",
        "date": "2019-04-01 13:29:18",
        "create_time": "2019-04-01 13:29:18",
        "status": "待處理"
    }
]

//data3.js
[
    {
        "id": "1",
        "title": "凍結(jié)租客密碼申請",
        "apply_name": "張君君",
        "date": "2019-04-01 13:29:18",
        "create_time": "2019-04-01 13:29:18",
        "status": "已處理"
    },
    {
        "id": "2",
        "title": "凍結(jié)同住人密碼申請",
        "apply_name": "張君君",
        "date": "2019-04-02 13:29:18",
        "create_time": "2019-04-01 13:29:18",
        "status": "已處理"
    },
    {
        "id": "3",
        "title": "凍結(jié)密碼延期申請",
        "apply_name": "張君君",
        "date": "2019-04-13 13:29:18",
        "create_time": "2019-04-01 13:29:18",
        "status": "已處理"
    },
    {
        "id": "4",
        "title": "凍結(jié)租客密碼申請",
        "apply_name": "張君君",
        "date": "2019-03-01 13:29:18",
        "create_time": "2019-04-01 13:29:18",
        "status": "已處理"
    },
    {
        "id": "5",
        "title": "凍結(jié)租客密碼申請",
        "apply_name": "張君君",
        "date": "2019-04-01 13:29:18",
        "create_time": "2019-04-01 13:29:18",
        "status": "已處理"
    },
    {
        "id": "6",
        "title": "凍結(jié)同住人密碼申請",
        "apply_name": "張君君",
        "date": "2019-04-02 13:29:18",
        "create_time": "2019-04-01 13:29:18",
        "status": "已處理"
    },
    {
        "id": "7",
        "title": "凍結(jié)密碼延期申請",
        "apply_name": "張君君",
        "date": "2019-04-13 13:29:18",
        "create_time": "2019-04-01 13:29:18",
        "status": "已處理"
    },
    {
        "id": "8",
        "title": "凍結(jié)租客密碼申請",
        "apply_name": "張君君",
        "date": "2019-03-01 13:29:18",
        "create_time": "2019-04-01 13:29:18",
        "status": "已處理"
    },
    {
        "id": "9",
        "title": "凍結(jié)租客密碼申請",
        "apply_name": "張君君",
        "date": "2019-04-01 13:29:18",
        "create_time": "2019-04-01 13:29:18",
        "status": "已處理"
    },
    {
        "id": "10",
        "title": "凍結(jié)同住人密碼申請",
        "apply_name": "張君君",
        "date": "2019-04-02 13:29:18",
        "create_time": "2019-04-01 13:29:18",
        "status": "已處理"
    },
    {
        "id": "11",
        "title": "凍結(jié)密碼延期申請",
        "apply_name": "張君君",
        "date": "2019-04-13 13:29:18",
        "create_time": "2019-04-01 13:29:18",
        "status": "已處理"
    },
    {
        "id": "12",
        "title": "凍結(jié)租客密碼申請",
        "apply_name": "張君君",
        "date": "2019-03-01 13:29:18",
        "create_time": "2019-04-01 13:29:18",
        "status": "已處理"
    },
    {
        "id": "13",
        "title": "凍結(jié)租客密碼申請",
        "apply_name": "張君君",
        "date": "2019-04-01 13:29:18",
        "create_time": "2019-04-01 13:29:18",
        "status": "已處理"
    },
    {
        "id": "14",
        "title": "凍結(jié)同住人密碼申請",
        "apply_name": "張君君",
        "date": "2019-04-02 13:29:18",
        "create_time": "2019-04-01 13:29:18",
        "status": "已處理"
    },
    {
        "id": "15",
        "title": "凍結(jié)密碼延期申請",
        "apply_name": "張君君",
        "date": "2019-04-13 13:29:18",
        "create_time": "2019-04-01 13:29:18",
        "status": "已處理"
    },
    {
        "id": "16",
        "title": "凍結(jié)租客密碼申請",
        "apply_name": "張君君",
        "date": "2019-03-01 13:29:18",
        "create_time": "2019-04-01 13:29:18",
        "status": "已處理"
    }
]

//data4.js
[
    {
        "id": "1",
        "title": "凍結(jié)租客密碼申請",
        "apply_name": "張君君",
        "date": "2019-04-01 13:29:18",
        "create_time": "2019-04-01 13:29:18",
        "status": "待處理"
    },
    {
        "id": "2",
        "title": "凍結(jié)同住人密碼申請",
        "apply_name": "張君君",
        "date": "2019-04-02 13:29:18",
        "create_time": "2019-04-01 13:29:18",
        "status": "已處理"
    },
    {
        "id": "3",
        "title": "凍結(jié)密碼延期申請",
        "apply_name": "張君君",
        "date": "2019-04-13 13:29:18",
        "create_time": "2019-04-01 13:29:18",
        "status": "已處理"
    },
    {
        "id": "4",
        "title": "凍結(jié)租客密碼申請",
        "apply_name": "張君君",
        "date": "2019-03-01 13:29:18",
        "create_time": "2019-04-01 13:29:18",
        "status": "已處理"
    }
]

//utils.js
export default {
    debounce(fn, delay = 500) {   //默認300毫秒
        var timer;
        return function() {
            var args = arguments;
            if(timer) {
                clearTimeout(timer);
            }
            timer = setTimeout(() => {
                fn.apply(this, args);   // this 指向vue
            }, delay);
        };
    }
}
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末痊硕，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子押框，更是在濱河造成了極大的恐慌岔绸，老刑警劉巖，帶你破解...
    沈念sama閱讀 219,110評論 6贊 508
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異盒揉，居然都是意外死亡晋被，警方通過查閱死者的電腦和手機，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,443評論 3贊 395
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門刚盈，熙熙樓的掌柜王于貴愁眉苦臉地迎上來羡洛，“玉大人，你說我怎么就攤上這事藕漱∮辏” “怎么了？”我有些...
    開封第一講書人閱讀 165,474評論 0贊 356
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵肋联，是天一觀的道長锈麸。 經(jīng)常有香客問我，道長牺蹄，這世上最難降的妖魔是什么忘伞？ 我笑而不...
    開封第一講書人閱讀 58,881評論 1贊 295
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮沙兰，結(jié)果婚禮上氓奈，老公的妹妹穿的比我還像新娘。我一直安慰自己鼎天，他們只是感情好舀奶，可當(dāng)我...
    茶點故事閱讀 67,902評論 6贊 392
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著斋射，像睡著了一般育勺。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上罗岖，一...
    開封第一講書人閱讀 51,698評論 1贊 305
  • 城市分裂傳說
    那天涧至，我揣著相機與錄音，去河邊找鬼桑包。 笑死南蓬，一個胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的哑了。 我是一名探鬼主播赘方，決...
    沈念sama閱讀 40,418評論 3贊 419
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼弱左！你這毒婦竟也來了窄陡？” 一聲冷哼從身側(cè)響起，我...
    開封第一講書人閱讀 39,332評論 0贊 276
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤拆火，失蹤者是張志新（化名）和其女友劉穎跳夭，沒想到半個月后鳖悠，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
    沈念sama閱讀 45,796評論 1贊 316
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡优妙，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,968評論 3贊 337
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年乘综，在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片套硼。...
    茶點故事閱讀 40,110評論 1贊 351
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡卡辰，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出邪意，到底是詐尸還是另有隱情九妈，我是刑警寧澤，帶...
    沈念sama閱讀 35,792評論 5贊 346
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布雾鬼，位于F島的核電站萌朱，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏策菜。R本人自食惡果不足惜晶疼，卻給世界環(huán)境...
    茶點故事閱讀 41,455評論 3贊 331
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望又憨。 院中可真熱鬧翠霍，春花似錦、人聲如沸蠢莺。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,003評論 0贊 22
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽躏将。三九已至锄弱，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間祸憋，已是汗流浹背会宪。 一陣腳步聲響...
    開封第一講書人閱讀 33,130評論 1贊 272
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留夺衍，地道東北人狈谊。 一個月前我還...
    沈念sama閱讀 48,348評論 3贊 373
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像沟沙，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子壁榕，可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,047評論 2贊 355