meilan-app/src/components/HomeContainer.vue

<template>
  <div class="home-container" :style="customHomeStyle" ref="containerRef">
    <div class="container" :style="customStyle">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    customHomeStyle: {
      type: Object,
      default: () => ({})
    },
    customStyle: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      scrollTimer: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.addScrollListener()
    })
  },
  beforeDestroy() {
    this.removeScrollListener()
  },
  methods: {
    addScrollListener() {
      const container = this.$refs.containerRef
      if (container) {
        container.addEventListener('scroll', this.handleScroll)
      }
    },
    removeScrollListener() {
      const container = this.$refs.containerRef
      if (container) {
        container.removeEventListener('scroll', this.handleScroll)
      }
      if (this.scrollTimer) {
        clearTimeout(this.scrollTimer)
      }
    },
    handleScroll() {
      // 触发滚动事件
      this.$emit('scroll')
      
      // 清除之前的定时器
      if (this.scrollTimer) {
        clearTimeout(this.scrollTimer)
      }
      
      // 设置新的定时器，停止滚动后触发停止事件
      this.scrollTimer = setTimeout(() => {
        this.$emit('scroll-end')
      }, 200)
    },
    
    // 滚动到顶部方法
    scrollToTop() {
      const container = this.$refs.containerRef
      if (container) {
        container.scrollTo({
          top: 0,
          behavior: 'smooth'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.home-container {
  height: 100%;
  overflow: auto;
  background: #FFFFFF;

  .container {
    width: 100%;
    padding: 20rpx;
    min-height: calc(100vh - 80rpx);
    overflow: auto;
    box-sizing: border-box;
    background: url("../static/images/home-bg.png") no-repeat;
    background-size: 100% auto;
    
  }
}
</style>