今天 实现 一个简单的功能，也是工作当中遇到的，大概就是 请求 接口没返回 数据 的 时 候 loading 显示 ，返回 数据 后 loading 消失 首先在表格标签里引入 loading 样式， 加载 时 的信息和绑定好表头和表格里面的 数据 :table-cols='tableColsMax' :table-data='tableData' v- loading =" loading " element - loading -text="拼命 加载 中" element - loading -spinner="

在 加载 前端的 数据 的 时 候，很多 时 候不能用进度条来衡量不定 数据 量。此 时 加载 动画 就有用武之地了。可以在 数据 请求 时 显示 加载 动画 ，等 动画 加载 完成再隐藏 加载 动画 ，让前端更具交互友好性。 网上百度了很多关于这方面的资料，但是好多感觉都很繁琐，本着偷懒的心态，在html5应用开发框架ionic中找到了该 加载 动画 的库 和其他开发库类似，首先需要 加载 该库的js 和 css，然后在html中直接使用即可。接下来关

Vue Element 是一个基于 Vue .js开发的UI组件库，其 实现 手动滚动 加载 排行榜效果的方法较为简单，可以通过以下步骤 实现 ： 1. 安装 Vue Element 组件库并引入需要使用的组件 ``` bash npm install element -ui -S ``` js import Vue from ' vue ' import Element UI from ' element -ui' import ' element -ui/lib/theme-chalk/index.css' Vue .use( Element UI) 2. 在模板中使用el-scrollbar组件，并设置scroll事件 ``` html <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> </template> 3. 通过handleScroll方法监听滚动事件，并判断滚动到底部 时 加载 更多 数据 ``` js 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事件节省了手动绑定事件监听的 时 间和代码量。