vant-ui van-list使用方式

            <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
                <van-list
                    v-model="loading"
                    :finished="finished"
                    finished-text="没有更多了"
                    :error.sync="error"
                    error-text="请求失败,点击重新加载"
                    @load="onLoad">
                    <van-cell v-for="item in tableData" :key="item.code" :title="item.name" @click="rowClick(item)">
                        <template #title>
                            <van-row>
                                <van-col span="5">{{item.code}}van-col>
                                <van-col span="11">{{item.value}}van-col>
                                <van-col span="8">{{item.name}}van-col>
                            van-row>
                        template>
                    van-cell>
                van-list>
            van-pull-refresh>
export default {
    data() {
        return {
            tableData: [],
            currentPage: 0,
            pageSize: 10,
            totalPage: 0,
            loading: false,
            finished: false,
            refreshing: false,
            error: false
        }
    },
    methods: {
	        onSearch() {
            try {
                if (this.refreshing) { this.refreshing = false }
                this.YourFetchAPI({
                    name: this.value,
                    netWorkType: 2,
                    bizSourceArrays: '6,7',
                    currentPage: this.currentPage,
                    pageSize: this.pageSize
                }).then(res => {
                    if (res.records) {
                        this.totalPage = res.totalPage
                        this.tableData.splice(this.tableData.length, 0, ...res.records)
                        this.loading = false
                        // 数据全部加载完成
                        if (this.currentPage >= this.totalPage) {
                            this.finished = true
                        }
                    } else {
                        this.tableData = []
                        this.finished = true
                    }
                })
            } catch (e) {
                console.log('e', e)
                this.error = true
                this.loading = false
            }
        },
        onLoad() { // 上拉加载
            this.currentPage += 1
            this.onSearch()
        },
        onRefresh() { // 下拉刷新
            this.loading = true
            this.finished = false
            this.currentPage = 1
            this.tableData = []
            this.onSearch()
        },
        clear() { // 清空重置
            this.currentPage = 1
            // this.onSearch()
        }	

	}
}

你可能感兴趣的:(vue)