vue+element 手动滚动加载排行榜效果

Vue Element是一个基于Vue.js开发的UI组件库，其实现手动滚动加载排行榜效果的方法较为简单，可以通过以下步骤实现：

1. 安装Vue Element组件库并引入需要使用的组件

npm install element-ui -S

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

2. 在模板中使用el-scrollbar组件，并设置scroll事件

<template>
  <div class="rank">
    <el-scrollbar class="rank-list" @scroll.native="handleScroll">
      <div class="rank-item" v-for="(item, index) in rankList" :key="index">{{ item }}</div>
    </el-scrollbar>
  </div>
</template>

3. 通过handleScroll方法监听滚动事件，并判断滚动到底部时加载更多数据

export default {
  data() {
    return {
      rankList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    }
  },
  methods: {
    handleScroll(e) {
      const scrollHeight = e.target.scrollHeight
      const scrollTop = e.target.scrollTop
      const clientHeight = e.target.clientHeight
      if (scrollHeight - scrollTop === clientHeight) {
        // 加载更多数据
        this.rankList.push(11, 12, 13, 14, 15)
      }
    }
  }
}

通过监听el-scrollbar组件的scroll事件并判断滚动距离是否达到底部，就可以实现手动滚动加载排行榜效果。同时，Vue Element组件库提供了el-scrollbar组件，可以满足排行榜滚动效果需要，并且通过其提供的scroll事件节省了手动绑定事件监听的时间和代码量。