uni-app 怎么监听 uni-grid 滚动

在uni-app中，要监听uni-grid组件的滚动事件，你可以利用@scroll事件监听器来实现。uni-grid组件本身并没有直接的滚动事件，但你可以将其放在一个可以滚动的容器中，比如scroll-view组件，然后监听这个容器的滚动事件。

以下是一个示例代码，展示了如何在uni-app中监听uni-grid的滚动事件：

1. 在页面的模板部分

<template>
  <view>
    <scroll-view scroll-y="true" @scroll="onScroll">
      <uni-grid :column-num="3">
        <uni-grid-item v-for="(item, index) in items" :key="index">
          <view class="grid-item">
            {{ item.name }}
          </view>
        </uni-grid-item>
      </uni-grid>
    </scroll-view>
  </view>
</template>

2. 在页面的脚本部分

<script>
export default {
  data() {
    return {
      items: [
        { name: 'Item 1' },
        { name: 'Item 2' },
        { name: 'Item 3' },
        // ... 添加更多项以触发滚动
      ]
    };
  },
  methods: {
    onScroll(event) {
      // event.detail.scrollTop 是当前滚动的垂直位置
      // event.detail.scrollLeft 是当前滚动的水平位置
      console.log('Scroll Top:', event.detail.scrollTop);
      console.log('Scroll Left:', event.detail.scrollLeft);
      
      // 你可以在这里添加滚动时的逻辑处理
    }
  }
};
</script>

3. 在页面的样式部分

<style scoped>
.grid-item {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ddd;
  box-sizing: border-box;
}

scroll-view {
  height: 300px; /* 根据需要设置高度 */
  overflow: hidden;
}
</style>

在这个例子中，scroll-view组件包含了uni-grid，并且设置了scroll-y="true"使其可以垂直滚动。然后，通过监听scroll-view的@scroll事件，你可以在onScroll方法中获取滚动的位置信息。

请注意，uni-grid本身是一个响应式布局组件，它本身不处理滚动事件。因此，我们需要将其放置在一个可以滚动的容器中，并通过监听该容器的滚动事件来实现滚动监听的功能。