vue实现类scrollview

Vue 实现类 ScrollView 组件

在 Vue 中实现类似 ScrollView 的功能，可以通过自定义组件结合原生滚动事件或第三方库完成。以下是几种常见实现方式：

使用原生滚动事件监听

通过监听 scroll 事件实现基础滚动逻辑：

<template>
  <div class="scroll-container" @scroll="handleScroll">
    <div class="scroll-content">
      <!-- 内容区域 -->
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    handleScroll(event) {
      const { scrollTop, scrollHeight, clientHeight } = event.target;
      const isNearBottom = scrollHeight - (scrollTop + clientHeight) < 50;
      if (isNearBottom) {
        this.$emit('reachBottom');
      }
    }
  }
};
</script>

<style>
.scroll-container {
  overflow-y: auto;
  height: 300px; /* 固定高度触发滚动 */
}
.scroll-content {
  min-height: 100%;
}
</style>

使用第三方库（如 better-scroll）

对于复杂滚动需求（如平滑滚动、下拉刷新），可使用 better-scroll：

<template>
  <div ref="scrollContainer" class="scroll-wrapper">
    <div class="scroll-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll';

export default {
  mounted() {
    this.scroll = new BScroll(this.$refs.scrollContainer, {
      scrollY: true,
      pullUpLoad: true,
      click: true
    });
    this.scroll.on('pullingUp', () => {
      this.$emit('loadMore');
      this.scroll.finishPullUp();
    });
  },
  beforeDestroy() {
    this.scroll.destroy();
  }
};
</script>

实现下拉刷新与上拉加载

结合自定义事件实现完整 ScrollView 功能：

<template>
  <div class="scroll-view">
    <div 
      ref="container"
      class="scroll-container"
      @scroll="handleScroll"
      @touchstart="handleTouchStart"
      @touchmove="handleTouchMove"
      @touchend="handleTouchEnd"
    >
      <div class="scroll-content" :style="{ transform: `translateY(${offsetY}px)` }">
        <div v-if="isRefreshing" class="refresh-indicator">Loading...</div>
        <slot></slot>
        <div v-if="isLoading" class="loading-indicator">Loading More...</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      startY: 0,
      offsetY: 0,
      isRefreshing: false,
      isLoading: false
    };
  },
  methods: {
    handleTouchStart(e) {
      this.startY = e.touches[0].pageY;
    },
    handleTouchMove(e) {
      if (this.$refs.container.scrollTop > 0) return;
      const moveY = e.touches[0].pageY - this.startY;
      if (moveY > 0) {
        this.offsetY = moveY;
        if (moveY > 50) this.isRefreshing = true;
      }
    },
    handleTouchEnd() {
      if (this.isRefreshing) {
        this.$emit('refresh');
        setTimeout(() => {
          this.isRefreshing = false;
          this.offsetY = 0;
        }, 1000);
      }
    },
    handleScroll(e) {
      const { scrollTop, scrollHeight, clientHeight } = e.target;
      if (scrollHeight - (scrollTop + clientHeight) < 50 && !this.isLoading) {
        this.isLoading = true;
        this.$emit('loadMore');
        setTimeout(() => {
          this.isLoading = false;
        }, 1000);
      }
    }
  }
};
</script>

性能优化建议

1. 虚拟滚动：对于长列表，使用 vue-virtual-scroller 优化渲染性能。
2. 节流处理：对 scroll 事件添加节流（如 lodash 的 _.throttle）。
3. CSS 硬件加速：为滚动容器添加 transform: translateZ(0) 提升性能。

// 节流示例
import { throttle } from 'lodash';
export default {
  methods: {
    handleScroll: throttle(function(e) {
      // 滚动逻辑
    }, 200)
  }
}

通过以上方式，可以灵活实现不同复杂度的 ScrollView 组件。