#插件讨论# 【 【wxs renderjs实现】高性能的下拉刷新上拉加载组件 - wenju 】vue3组合式api怎么引入

大佬解决了吗?

template写法不变

<template>  
    <view class="content">  
        <!-- 滚动容器 -->  
        <mescroll-uni  
            ref="mescrollRef"   
            @init="mescrollInit"  
            @down="downCallback"   
            @up="upCallback"  
            :down="MescrollConfig.downOption"   
            :up="MescrollConfig.upOption"  
        >  
        </mescroll-uni>  
    </view>  
</template>

js 部分就是取巧把 this.mescroll 传参到setup 函数内部中

<script>  
    import { reactive } from "vue";  
    import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';  
    export default {  
        mixins: [ MescrollMixin ],  
        setup() {  
            const MescrollConfig = reactive({  
                downOption: {},  
                upOption: {}  
            });  

            const handleGetList = (mescroll, page) => {  
                console.log(page);  
                mescroll.endBySize(0, 0);  
            };  

            return { MescrollConfig, handleGetList }  
        },  

        methods: {  
            downCallback() {  
                this.mescroll.resetUpScroll();  
            },  
            upCallback({ num, size }) {  
                this.handleGetList(this.mescroll, { num, size });  
            }  
        }  
    }  
</script>

vue3.2x可以多封成一个组件

<template>  
    <view>  
        <mescroll-uni  
            :ref="mescrollRef"  
            :top="topHeight"  
            @init="mescrollInit"  
            @down="downCallback"  
            @up="upCallback"  
            :down="MescrollConfig.downOption"  
            :up="MescrollConfig.upOption"  
        >  
            <slot />  
        </mescroll-uni>  
    </view>  
</template>

<script setup>  
    const emit = defineEmits(['update:mescroll']);  
    const props = reactive({  
        mescroll: {},  
    });  
    const mescrollRef = ref();  
    const MescrollConfig = reactive({  
        downOption: {  
            auto: false,  
            autoShowLoading: true,  
            textColor: '#999',  
            offset: 100,  
        },  
        upOption: {  
            auto: false,  
            noMoreSize: 20,  
        },  
    });  
    const topHeight = computed(() => {  
        return (750 / uni.upx2px(750)) * (0);  
    });  
    const mescrollInit = (e) => {  
        props.mescroll = e;  
        emit('update:mescroll', e);  
    };  
        //回调可以自己emit出去方便页面组件操作  
    const downCallback = () => {  
        if (props.mescroll.optUp.use) {  
            props.mescroll.resetUpScroll();  
        } else {  
            setTimeout(() => {  
                props.mescroll.endSuccess();  
            }, 500);  
        }  
    };  
    // 上拉加载的回调  
    const upCallback = () => {  
        // mixin默认延时500自动结束加载  
        setTimeout(() => {  
            props.mescroll.endErr();  
        }, 500);  
    };  
</script>

已更新vue3示例,请点击页面右上角的 "使用HBuilderX导入示例项目"或"下载示例项目ZIP"