vue中使用 vue-socket.io 的三种方式及采坑记录

导语：最近由于一些事情需要处理，所以没来得及写技术总结了。今天终于可以坐下来好好的梳理一下脉络，说一下那个在日常前端开发过程中，常用到的页面列表加载的方法总结。这里介绍三种方法，分别是分页加载、按钮加载以及滚动加载。

目录

• 方法简介
• 代码实现
• 效果预览

方法简介

在日常的前端开发过程中，我们经常会碰到列表很长，不可能完全显示出来，所以就要进行分页，每页固定显示几条，然后下面是页数，点到哪页显示哪页的内容。

除了常见的分页加载外，还要点击按钮加载，这种加载方法就是不需要点击下一页这种了，直接点击按钮往第一页的后面补上下一页的内容，非常方便。

除了以上两种，滚动加载也是用的比较多的一种列表加载方法，下面就这三种方法做一下总结归纳，方便需要的小伙伴们使用。

封装实现

下面就对三种方法分别做一下原理解析和方法实现。

下面的列表使用了JSONPlaceholder站点上的一些数据作为列表来源。

分页加载

当页面的需求是要显示一个列表或者表格，总数很多放不下，这时候可以把全部的数据分成多页，每页显示固定的条数，计算出总页数，然后渲染一下就可以了。

• 页面布局

<div class="wrap"><ul id="list"></ul><ul id="pages"></ul>
</div> 

.wrap {max-width: 960px;margin: 0 auto;padding: 15px 0;
}

.wrap li {padding: 5px 0;list-style: square;
}

.wrap li h3,
.wrap li p {text-transform: capitalize;
}

.wrap li h3:hover {color: #f00;cursor: pointer;
}

#pages li {display: inline-block;margin-right: 10px;list-style: none;
}

#pages button {width: auto;min-width: 40px;height: 40px;background: #fff;box-shadow: 0 0 5px #fff;border: 1px solid #ccc;border-radius: 5px;font-size: 16px;
}

#pages button:hover,
#pages button.active {color: #fff;border-color: #f00;background: #f00;cursor: pointer;
}

#pages button.dis {cursor: no-drop;
}

.wrap .loading {line-height: 70vh;text-align: center;list-style: none;
}

.wrap .nodata {list-style: none;text-align: center;
} 

• 定义变量

let datas = [], // 分组列表
current = 1, // 当前页
pages = 0, // 总页数
total = 0, // 总数
listElem = document.getElementById('