更新记录

1.0（2021-08-31） 下载此版本

scroll-view组件

平台兼容性

用法：

<page-scroll-view ref="scroll" :isEmpty="isEmpty" @refresh="refresh" @scrolltolower="scrolltolower" :loadStatus="loadStatus">
    <examine-content v-for="(item, index) in dataList" :key="index" :item="item">         </examine-content>
</page-scroll-view>

引入

import pageScrollView from '@/components/page-scroll-view.vue';

components: {
    examineContent,
    pageScrollView
},

参数：

这里的examine-content组件是作者本人封装列表组件，这里可以忽略。

    data() {
        return {
            loadStatus: 'loadmore',
            type: 0,
            sort: 1,
            dataList: [],
            pageData: {
                current: 1,
                size: 10
            }
        };
    },
    onLoad() {
        this.initData();
    },
    computed: {
        isEmpty() {
            return this.dataList.length == 0;
        }
    },
    methods: {
        // 下拉刷新重新刷新数据
        async refresh(){
            this.pageData.current = 1;
            await this.initData();
            // 这里调用组件内的refresherComplete方法关闭状态。
            this.$refs.scroll.refresherComplete()
        },
        // 上拉加载更多数据
        scrolltolower(){
            this.pageData.current++;
            this.initData();
        },

        // 初始化
        async initData() {
            this.loadStatus = 'loading';
            let params = {
                ...this.pageData,
                orderParam: this.sort,
                handleState: this.type
            };
            const res = await this.$u.api.repair.fetchAuditPage(params);
            if (res) {
            if(this.pageData.current == 1){
                this.dataList = res.records
            }else{
                this.dataList = [...this.dataList, ...res.records];
            }

            if (res.last) {
                this.loadStatus = 'nomore';
            } else {
                this.loadStatus = 'loadmore';
            }

        }
        console.log(this.dataList,'dataList...')
    },
}

这里的dataList 是列表数据。代码已完全写出，逻辑不复杂，可自行阅读使用即可。注意，组件高度是height是100%，在引入组件时应在外层套一个固定高度的view。