van-list加载更多使用

471 阅读1分钟
<van-list
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="LoadData"
>
    <div class="card" @click="editorBtn(v)" v-for="(v,i) in list" :key="i">
        <div class="flCont">
            <span class="ell">{{v.ruleName}}</span>
            <span class="ell fontSize">关键词:{{v.keyWords}}</span>
            <span class="ell fontSize">模式:{{v.matchType ? '包含全部词' : '包含任意词'}}</span>
            <b>更新:{{v.updateTime}}</b>
        </div>
        <span class="frCont">
            <button @click.stop="deleteContent(v.id)">删除</button>
        </span>
    </div>
</van-list>

data() {
    return {
        loading: false,
        finished: false,
        list:[],
        page: {
            from: 0,
            size: 10
        }
    };
},
methods:{
    // 查询列表
    _autoResponseList() {
        this.$https.autoResponseList({
            currentPageNumber: this.page.from,
            pageSize: this.page.size
        }).then(res => {
            console.log(res.data)
            this.loading = false;
            if(res.data.dataList && res.data.dataList.length){
                res.data.dataList.forEach(i => {
                    i.updateTime = utility.formatDate(i.updateTime)
                })
                this.list.push(...res.data.dataList)
            } else {
                this.finished = true
            }
            this.list = res.data.dataList
        })
    },
    LoadData() {
        this.page.from += 1;
        this._autoResponseList();
    }
}