UniApp中给固定盒子监听触底事件

在UniApp中，如果你想给一个固定的盒子添加触底（touch bottom）事件监听，可以使用`uni-app`的内置组件如`van-cell`或自定义组件，并利用`@touchmove.stop`阻止默认的滚动行为，然后在`@touchend`事件中处理触底逻辑。以下是一个简单的例子：

<!-- 使用vant组件 -->
<view class="fixed-box">
  <van-cell v-model="isBottom" @touchmove.stop>
    <!-- 内容... -->
    <div slot="footer">底部区域</div>
  </van-cell>
</view>

<script>
export default {
  data() {
    return {
      isBottom: false,
    };
  },
  methods: {
    onTouchEnd(e) {
      if (e.targetTouches[0].clientY > this.$refs.fixedBox.offsetHeight) { // 检查是否触底
        this.isBottom = true;
        // 在这里添加触底事件的回调函数，比如显示更多内容、弹出提示等
      } else {
        this.isBottom = false;
      }
    },
  },
};
</script>

<style scoped>
.fixed-box {
  position: fixed; /* 固定定位 */
  bottom: 0; /* 底部对齐 */
  width: 100%;
}
</style>

如果你是自定义组件，需要添加`@touchmove.prevent`阻止默认的滑动，然后同样监听`touchend`事件：

<template>
  <div :ref="refName" @touchmove.prevent @touchend="onTouchEnd"></div>
</template>

<script>
export default {
  props: {
    refName: String, // 组件引用名
  },
  methods: {
    onTouchEnd(e) {
      if (e.targetTouches[0].clientY > this.$refs.refName.clientHeight) {
        // 触底处理...
      }
    },
  },
};
</script>