1***@163.com
1***@163.com
  • 发布:2023-11-25 16:58
  • 更新:2023-11-25 16:58
  • 阅读:250

组件销毁 onPullDownRefresh 下拉刷新没销毁

分类:uni-app

子组件:

<template>  
    <view class="container">  
        <uni-list v-for="(item,index) in state.dataList">  
            <uni-list-item :key="item.prod_log_guid" link to="/pages/vue/index/index">  
                <template v-slot:body>  
                    <view class="body-width">  
                        <uni-row :gutter="10">  
                            <uni-col :span="6">  
                                产线名称  
                            </uni-col>  
                            <uni-col :span="18">  
                                {{item.prod_line_name}}  
                            </uni-col>  
                        </uni-row>  
                        <uni-row :gutter="10">  
                            <uni-col :span="6">  
                                工位名称  
                            </uni-col>  
                            <uni-col :span="18">  
                                {{item.station_name}}  
                            </uni-col>  
                        </uni-row>  

                    </view>  

                </template>  
            </uni-list-item>  
        </uni-list>  

        <tui-nomore text="没有更多了..." v-if="state.status=='state.nomore'"></tui-nomore>  
        <tui-loadmore text="加载中..." v-if="state.status=='state.loading'"></tui-loadmore>  
    </view>  
</template>  

<script setup>  
    import {  
        reactive,  
        toRefs,  
        onUnmounted,  
        onMounted,  
        getCurrentInstance,  
    } from "vue";  
    import {  
        onLoad,  
        onPullDownRefresh,  
        onReachBottom  
    } from "@dcloudio/uni-app"  
    const {  
        tui  
    } = getCurrentInstance().appContext.config.globalProperties;  
    import {  
        boolEnumOptions  
    } from "@/common/enum.js"  
    const props = defineProps({  

        /**  
         * @description 已选项列表  
         * @type {String}  
         */  
        prodSn: {  
            type: String,  
            default: () => ''  
        }  
    });  
    const {  
        prodSn  
    } = toRefs(props);  

    const state = reactive({  
        queryParam: {  
            pageNo: 1,  
            pageSize: 10,  
            prodSn: prodSn,  
        },  
        status,  
        hasMorePage: true,  
        dataList: []  
    })  

    onReachBottom(() => {  
        setTimeout(() => {  
            getList();  
        }, 500);  
    })  
    const getList = () => {  

        tui.request("/prodrecord/v1/page", "POST", state.queryParam).then((res) => {  
            if (res.data.success == true) {  

                state.dataList = res.data.list;  
                state.pageNo++;  
                state.hasMorePage = res.data.list.length != 0;  
                state.status = !hasMorePage.value ? "nomore" : "more";  
            } else {  
                tui.toast("获取生产记录失败");  
            }  
        }).catch((res) => {})  
    };  
onUnmounted(()=>{  
        console.log("onUnmounted");  

})  
    onMounted(() => {  
        console.log("onMounted");  
        onPullDownRefresh(function() {  
            console.log("onPullDownRefresh");  
            state.dataList.length = 0;  
            state.queryParam.pageNo = 1;  
            state.hasMorePage = true;  
            setTimeout(() => {  
                getList();  
            }, 500);  

            uni.stopPullDownRefresh();  
        })  
    });  
    onLoad((option) => {  
                console.log("onLoad");  
        getList();  
    });  
</script>  

<style lang="scss" scoped>  
    .body-width {  
        width: 100%;  

        .uni-row {  
            margin-top: 5px;  
        }  
    }  
</style>  
父组件引用:  
<template>  
    <view class="container">  
        <uni-nav-bar fixed="true" leftIcon="left" @clickLeft="back" :border="false" title="产品详情">  

        </uni-nav-bar>  
        <view>  
            <tui-tabs :tabs="tabs" :currentTab="currentTab" @change="change"></tui-tabs>  
        </view>  
        <scroll-view class="scroll-view" scroll-y>  
                <prodRecord v-if="currentTab===0"  :key="0"></prodRecord>  
                <prodRecord v-if="currentTab===1"  :key="1"></prodRecord>  
        </scroll-view>  
    </view>  
</template>
2023-11-25 16:58 负责人:无 分享
已邀请:

要回复问题请先登录注册