Tui Plus Vapor

Appearance

t-visibility-sensor ​

VisibilitySensor 可见性传感器

组件介绍 ​

t-visibility-sensor 是用于监听元素是否在可视区域内的组件，当元素进入或离开视口时会触发相应事件，适用于懒加载、埋点统计、动画触发等场景。

平台兼容 ​

HarmonyH5AndroidiOS小程序UTS
✅✅✅✅✅✅

基础用法 ​

基础用法参考 demo/visibility-sensor/visibility-sensor.uvue。

vue
<template>
  <view class="visibility-sensor-demo">
    <scroll-view scroll-y class="scroll-view" @scroll="onScroll">
      <view v-for="i in 20" :key="i" class="item-wrapper">
        <t-visibility-sensor 
          :scrollTop="scrollTop" 
          :mark="`item-${i}`"
          @visible="onVisible"
          @change="onChange">
          <view class="content-box">
            <text>第 {{ i }} 个元素</text>
            <image 
              v-if="visibleItems.includes(`item-${i}`)" 
              :src="`/static/image-${i}.jpg`" 
              mode="aspectFill">
            </image>
            <view v-else class="placeholder">图片加载中...</view>
          </view>
        </t-visibility-sensor>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
const scrollTop = ref(0);
const visibleItems = ref([]);

function onScroll(e) {
  scrollTop.value = e.detail.scrollTop;
}

function onVisible(visible) {
  console.log('元素可见性:', visible);
}

function onChange({ ins, state, mark }) {
  console.log('元素状态变化:', mark, state);
  if (state && !visibleItems.value.includes(mark)) {
    visibleItems.value.push(mark);
  }
}
</script>

<style scoped>
.visibility-sensor-demo {
  height: 100vh;
}
.scroll-view {
  height: 100%;
}
.item-wrapper {
  height: 300rpx;
  margin: 20rpx;
}
.content-box {
  height: 100%;
  background: #f5f5f5;
  border-radius: 12rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.placeholder {
  color: #999;
}
</style>

Props ​

属性名说明类型默认值
scrollTop滚动组件的 scrollTop 值number0
mark组件标记，用于区分不同元素string''
path点击组件后跳转的页面路径string''
hover是否启用点击效果booleanfalse
type组件主题类型string''
disabled是否禁用booleanfalse
effect组件显示主题string'plain'
size组件尺寸string''

Events ​

事件名说明回调参数
visible元素可见性变化时触发boolean（是否可见）
change元素状态发生变化时触发{ ins: instance, state: boolean, mark: string }
transitionend动画结束时触发event

插槽 ​

插槽名说明
default需要监听可见性的内容