uni-app中的list-view组件监听list-item是否滚动到屏幕可见区域

发布于 1周前 作者 phonegap100 来自 Uni-App

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操作来计算列表项的可见性。

示例代码

  1. 页面模板 (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>
  1. 页面脚本 (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>
  1. 样式 (index.vue):
<style>
.list-item {
  padding: 20px;
  border-bottom: 1px solid #ddd;
}
</style>

说明

  • scroll-view组件用于实现滚动列表。
  • onScroll事件监听滚动事件,更新scrollTop
  • updateItemHeights方法使用uni.createSelectorQuery获取每个列表项的高度。
  • checkVisibleItems方法根据滚动位置和列表项高度计算哪些列表项是可见的。
  • isVisible方法根据计算结果返回列表项的可见性状态。

这种方法虽然可以实现基本功能,但在性能优化和复杂场景下可能需要更多调整。

回到顶部