VisibilitySensor 元素监听

VisibilitySensor 元素监听组件，用于监听元素是否在视口中可见，支持配置标记等。

示例

<template>
	<t-page title="元素监听" class="p.30">
		<t-card title="VisibilitySensor" class="mb.30" sub-title="监听元素是否在可视区"></t-card>
		<t-button type="p" class="df-db.30-dlr.30-z.1">{{showText}}</t-button>
		<t-row class="h.300-tdr-tdb-mb.30"></t-row>
		<t-visibility-sensor @change="vischange" mark="图片1">
			<t-col>
				<t-image class="h.300-tdr-mb.30-w.100%" src='../../../../static/image/D2.jpg'></t-image>
			</t-col>
		</t-visibility-sensor>
		<t-row class="h.300-tdr-tdb-mb.30"></t-row>
		<t-row class="h.300-tdr-tdb-mb.30"></t-row>
		<t-visibility-sensor @change="vischange" mark="图片2">
			<t-col>
				<t-image class="h.300-tdr-mb.30-w.100%" src='../../../../static/image/D2.jpg'></t-image>
			</t-col>
		</t-visibility-sensor>
		<t-row class="h.300-tdr-tdb-mb.30"></t-row>
		<t-row class="h.300-tdr-tdb-mb.30"></t-row>
		<t-row class="h.300-tdr-tdb-mb.30"></t-row>
	</t-page>
</template>

<script>
	import { TuiVisibilitySensorChange, random } from '@/uni_modules/t-ui';
	export default {
		data() {
			return {
				showText: ''
			};
		},
		methods: {
			vischange(e : TuiVisibilitySensorChange) {
				this.showText = e.mark + (e.state ? '可见' : '不可见')
			}
		}
	}
</script>

支持平台

安卓	ios	web	微信小程序	支付宝小程序	QQ小程序
√	√	√	x	x	x

Props

名称	描述	类型	默认值	可选值
mark	标记	String	""	-

Events

事件名	描述	回调参数	版本
change	当元素可见性发生变化时触发	"{ ins: this, state: boolean, mark: string }"	-

Slots

名称	描述
default	默认插槽，用于放置需要监听可见性的内容