uni-app中的list-view组件监听list-item是否滚动到屏幕可见区域
uni-app中的list-view组件监听list-item是否滚动到屏幕可见区域
如何监听list-item滚动到屏幕可见区域从而实现video自动播放与暂停
在 list-view
中的 list-item
中包含 video
,可以通过监听 list-item
滚动到屏幕可见区域来实现视频的自动播放与暂停。
1 回复
在uni-app中,list-view
组件并不是官方直接提供的组件,但你可以通过scroll-view
组件和列表渲染结合自定义逻辑来实现监听列表项(list-item)是否滚动到屏幕可见区域的功能。这通常涉及计算列表项的滚动位置和屏幕的可视区域。
以下是一个简单的实现示例,利用scroll-view
组件和onScroll
事件监听滚动,结合DOM操作来计算列表项的可见性。
示例代码
- 页面模板 (
index.vue
):
<template>
<view>
<scroll-view scroll-y="true" @scroll="onScroll" :scroll-into-view="toView" style="height: 100vh;">
<view v-for="(item, index) in list" :key="index" :id="'item-' + index" class="list-item">
{{ item }} - {{ isVisible(index) ? 'Visible' : 'Not Visible' }}
</view>
</scroll-view>
</view>
</template>
- 页面脚本 (
index.vue
):
<script>
export default {
data() {
return {
list: Array.from({ length: 50 }, (_, i) => `Item ${i + 1}`),
scrollTop: 0,
screenHeight: 0,
itemHeights: [],
visibleItems: []
};
},
computed: {
toView() {
// This is just for smooth scrolling demonstration, not essential for visibility check
return this.list.length ? `item-0` : null;
}
},
mounted() {
this.screenHeight = uni.getSystemInfoSync().windowHeight;
this.$nextTick(() => {
this.updateItemHeights();
});
},
methods: {
onScroll(e) {
this.scrollTop = e.detail.scrollTop;
this.checkVisibleItems();
},
updateItemHeights() {
const query = uni.createSelectorQuery().in(this);
this.list.forEach((_, index) => {
query.select(`#item-${index}`).boundingClientRect(rect => {
this.itemHeights[index] = rect.height;
}).exec();
});
},
checkVisibleItems() {
this.visibleItems = this.list.map((_, index) => {
const top = this.scrollTop + (this.itemHeights.slice(0, index).reduce((sum, height) => sum + height, 0));
const bottom = top + this.itemHeights[index];
return bottom > 0 && top < this.screenHeight;
});
},
isVisible(index) {
return this.visibleItems[index];
}
}
};
</script>
- 样式 (
index.vue
):
<style>
.list-item {
padding: 20px;
border-bottom: 1px solid #ddd;
}
</style>
说明
scroll-view
组件用于实现滚动列表。onScroll
事件监听滚动事件,更新scrollTop
。updateItemHeights
方法使用uni.createSelectorQuery
获取每个列表项的高度。checkVisibleItems
方法根据滚动位置和列表项高度计算哪些列表项是可见的。isVisible
方法根据计算结果返回列表项的可见性状态。
这种方法虽然可以实现基本功能,但在性能优化和复杂场景下可能需要更多调整。