infinite-scroll
前因
前段儿时间,公司内部做了个项目,原本的数据展示方式是table + pagination。本来感觉还不错,but 使用者觉得分页很不方便(没法看到表格最后一行和第二页第一行一块显示),后来想了想确实不方便。由此想到了滚动加载
的方式。
后果
由于项目用的前端框架是Vue,所以就写了一个基于vue简单的滚动加载组件:CmInfiniteScroll
使用方法
只需要用该组件把要实现滚动加载的区域包裹起来即可。
服务员~,上代码:
<cm-infinite-scroll
@scroll-to-bottom="onScrollToBottom">
<ul>
<li v-for="(news, index) in newsList" :key="index">
<h2>{{news.title}}</h2>
<p>{{news.content}}</p>
</li>
</ul>
</cm-infinite-scroll>
<script>
import CmInfiniteScroll from 'chaomeng-ui/CmInfiniteScroll'
export default {
name: 'infiniteScroll',
components: {
CmInfiniteScroll
},
data () {
return {
newsList: [
{ title: '新闻标题1', content: '内容1' },
{ title: '新闻标题2', content: '内容2' },
{ title: '新闻标题3', content: '内容3' },
{ title: '新闻标题4', content: '内容4' },
{ title: '新闻标题5', content: '内容5' }
]
}
},
methods: {
onScrollToBottom () {
setTimeout(() => {
this.newsList.push({
title: `新闻标题${this.newsList.length + 1}`,
content: `内容${this.newsList.length + 1}`
})
}, 1500)
}
}
}
</script>
复制代码
当然还有更详细的用法,可以参考项目中的示例,再次就不过多说了。
?坑
一开始项目中用到了ElementUI
的el-table
作为内容的呈现方式,然后每次当我滚动到底部的时候,由于加载新数据的时候,滚动条不能自动向上滚动(el-table渲染新元素的方式导致),所以就会多次触发scroll-to-bottom
事件,后来加上threshold
也不好使。无奈只好用了原生的table
元素。