uniapp解读代码

引言 学习uniapp代码解读

• （一）swiper中的多个组件ref存储

<swiper class="swiper" :current-item-id="current" @change="handleSwiperChange">
  <swiper-item v-for="item of tabHeaderDataList" :key="item.id" :item-id="item.id">
    <view class="swiper-item">
      <ContractList
        :filterFormData="filterFormData"
        :itemId="item.id"
        :item="item"
        :currentTab="current"
        :contractCode="getContractCode"
        @operClick="handleOperClick"
        @detailClick="handleDetailClick"
        @emitCountData="emitCountData"
        ref="ContractListRef"
      />
    </view>
  </swiper-item>
</swiper>

const ContractListRef = ref<InstanceType<typeof ContractList>[]>();

（1） typeof ContractList：获取 ContractList 的类型（通常是一个 Vue 组件）。

InstanceType<...>：获取该组件的实例类型。
（2）ContractLis组件内部进行暴露，外部变可以调用
defineExpose({
openDialog,
renderData,
openFilter,
resetBatchSigning,
});
（3）外部调用
ContractListRef.value?.[0]?.openDialog(current.value);
ContractListRef.value?.[0]?.openFilter(curTabIndex.value);

• （二）swiper 和 List 列表嵌套

  <view class="main">
    <view class="header" id="header">
      <view class="header-tabList">
        <SdpTabs
          class="component-stretch-hidden"
          :list="tabHeaderDataList"
          @change="onChange"
          :current="curTabIndex"
        ></SdpTabs>
      </view>
      <view
        class="header-filterBtn"
        :class="{ active: computedFilterActive }"
        @click="openFilter = true"
        >筛选</view
      >
    </view>
    <view class="content">
      <swiper class="swiper" :current-item-id="current" @change="handleSwiperChange">
        <swiper-item v-for="item of tabHeaderDataList" :key="item.id" :item-id="item.id">
          <view class="swiper-item">
            <ContractList
              :filterFormData="filterFormData"
              :itemId="item.id"
              :item="item"
              :currentTab="current"
              :contractCode="getContractCode"
              @operClick="handleOperClick"
              @detailClick="handleDetailClick"
              @emitCountData="emitCountData"
              ref="ContractListRef"
            />
          </view>
        </swiper-item>
      </swiper>
    </view>
    </view>

swiper嵌套列表高度css布局

.main {
 width: 100%;
 height: 100vh;
 overflow: hidden;
 display: flex;
 flex-direction: column;
 background-image: url('https://pro-sdp-oss.aitojoy.com/fe/tojoy-sdp-employee/image/nav-bar-bg_20240516_1513.png');
 background-repeat: no-repeat;
 background-size: contain;
 background-color: #f5f7fa;
 //padding-bottom: constant(safe-area-inset-bottom);
 //padding-bottom: env(safe-area-inset-bottom);
 .header {
   display: flex;
   align-items: center;
   &-tabList {
     flex: 1;
   }
   &-filterBtn {
     width: auto;
     height: 100%;
     padding: 0 25rpx;
     font-size: 30rpx;
     color: rgba(0, 0, 0, 0.9);
     display: flex;
     align-items: center;
     &::before {
       content: '';
       background-image: url('https://pro-sdp-oss.aitojoy.com/fe/tojoy-sdp-employee/image/icon-filter_20240517_1012.png');
       width: 30rpx;
       height: 28rpx;
       background-size: cover;
     }
     &.active {
       color: #605ce5;
       font-weight: 500;
       &::before {
         background-image: url('https://pro-sdp-oss.aitojoy.com/fe/tojoy-sdp-employee/image/icon-checked-filter_20240618_1522.png');
       }
     }
   }
 }
 .content {
   // padding: 0 20rpx;
   flex: 1;
   overflow: hidden;
   .swiper {
     height: 100%;
     .swiper-item {
       height: 100%;
     }
   }
 }
}

1、 list组件内部css

.scroll {
height: 100%;
padding-top: 20rpx;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}