l***@qq.com
l***@qq.com
  • 发布:2024-09-22 23:41
  • 更新:2024-09-22 23:41
  • 阅读:20

uts setup 调用子组件方法

分类:uni-app x

使用vue 3.0 + uts + setup 如何调用子组件方法,使用图上方式无法编译,语法矫正功能无提示错误,下面时页面全部代码,组件为社区上的z-paging-x版本


<template>  
    <z-paging-x ref="listRef" v-model="listData"  @query="queryList" :auto="false">  
        <template v-slot:top>  
            <view class="home_navber">  
                <text class="navberTitle">换客</text>  
                <view class="SearchBox">  
                    <uni-icons type="scan" size="42rpx"/>  
                    <swiper class="content_swiper" :autoplay="true" :vertical="true">   
                        <swiper-item>  
                            <text class="item">电脑</text>  
                        </swiper-item>  
                        <swiper-item>  
                            <text class="item">手机</text>  
                        </swiper-item>  
                        <swiper-item>  
                            <text class="item">相机</text>  
                        </swiper-item>  
                    </swiper>  
                    <view class="searchButton">  
                        <uni-icons type="search" size="36rpx" color="#fff" />  
                    </view>  
                </view>  
            </view>  
        </template>  
        <list-item v-for="(itme,index) in 50" :key="index" :type="index">  
            <productCard />  
        </list-item>  
    </z-paging-x>  

</template>  

<script lang="uts" setup>  
    const listData=ref<Array<object>>([])  

    const listRef=ref<ZPagingXComponentPublicInstance | null>(null)  

    const queryList=(pageNo: number, pageSize: number)=>{  
        (listRef.value as  ZPagingXComponentPublicInstance |  null)?.complete([])  
        // console.log('listRef',(listRef.value as  ComponentPublicInstance | null)?.complete());  
        console.log(pageNo,pageSize);  
    }  

</script>  

<style lang="scss">  
    .home_navber{  
        width:100%;  
        height:160rpx;  
        background-color:#fff;  
        box-shadow: $box-show;  
        padding-top: var(--status-bar-height);  
        justify-content: center;  
        padding-left:20rpx;  
        padding-right:20rpx;  
        box-sizing: border-box;  
        flex-direction: row;  
        align-items: center;  
        .SearchBox{  
            flex:1;  
            border:solid 1rpx black;  
            padding:10rpx;  
            border-radius:$border-Max;  
            height:60rpx;  
            align-items: center;  
            flex-direction: row;  
            .content_swiper{  
                flex:1;  
                .item{  
                    color:$text-comp-color;  
                }  
                margin:0rpx 20rpx;  
            }  
            .searchButton{  
                width: 80rpx;  
                height: 40rpx;  
                background-color: $theme-Color;  
                border-radius: $border-Max;  
                align-items: center;  
            }  
        }  
        .navberTitle{  
            font-size:42rpx;  
            font-weight: bold;  
            margin-right:20rpx;  
        }  
    }  

</style>  
2024-09-22 23:41 负责人:无 分享
已邀请:

要回复问题请先登录注册