使用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>
l***@qq.com (作者)
好的
2024-09-23 11:22