Tui Plus Vapor

Appearance

t-lazy ​

Lazy 懒加载

组件介绍 ​

懒加载组件，组件不会立即渲染，当设置时间到之后才渲染，用于优化页面性能和提升用户体验。

平台兼容 ​

HarmonyH5AndroidiOS小程序UTS
✅✅✅✅✅✅

基础用法 ​

vue
<template>
  <view class="lazy-demo">
    <t-text>这是立即显示的内容</t-text>
    
    <t-lazy>
      <view class="lazy-content">
        <t-text>这是延迟加载的内容</t-text>
        <t-image src="https://example.com/image.jpg" mode="widthFix"></t-image>
      </view>
    </t-lazy>
    
    <t-lazy>
      <view class="lazy-content">
        <t-text>这是另一个延迟加载的内容</t-text>
        <t-list>
          <t-cell v-for="i in 10" :key="i" :title="'Item ' + i"></t-cell>
        </t-list>
      </view>
    </t-lazy>
  </view>
</template>

<style scoped>
.lazy-demo {
  padding: 20rpx;
}

.lazy-content {
  margin-top: 20rpx;
  padding: 20rpx;
  background-color: #f5f5f5;
  border-radius: 10rpx;
}
</style>

Props ​

该组件暂无 Props 属性。

Events ​

该组件暂无 Events 事件。

Slots ​

插槽名说明
default内容插槽，用于放置需要延迟加载的内容