插件名称 | vue-list-scroller |
---|---|
发布时间 | 2020年6月13日 |
插件作者 | IvanSafonov |
# NPM
$ npm install vue-list-scroller --save
一个具有无限滚动支持的Twitter feed样式垂直列表滚动器。
该组件利用ResizeObserver API确定屏幕尺寸并自动调整不同设备上的内容的大小。
v1.1.0(07/07/2020)
1.导入vue-list-scroller组件。
import ListScroller from 'vue-list-scroller'
2.将<list-scroller />组件添加到应用程序。
<list-scroller
:item-component="item"
:items-data="items"
:item-height="350"
class="list"
@bottom="addMore" />
3.创建项目模板。
<template id="list-item">
<div class="item">
<img :src="imgUrl" />
<div>
<h1><b>Item {{ index }}</b></h1>
{{ ' ' + data.text }}
</div>
</div>
</template>
4.启用列表滚动器。做完了
Vue.component('list-item', {
template: '#list-item',
props: {
data: Object,
index: Number,
},
computed: {
imgUrl() {
return `https://picsum.photos/id/${this.data.img}/500/200`
},
},
});
const lorem =
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. ' +
'Phasellus mattis at neque eu venenatis. Nam et sodales purus. ' +
'Suspendisse pulvinar nisl purus, vel consequat neque varius vel. ' +
'Ut ut consequat lorem. Nulla odio arcu, porta eu fringilla id, ' +
'porta eget massa. Vivamus porta pulvinar ex, vel egestas erat ' +
'rutrum vitae. Cras at felis malesuada, lacinia nulla non, ' +
'tincidunt ligula. Sed facilisis mauris et metus commodo, ' +
'sit amet porttitor mi efficitur. Cras et accumsan eros. Ut ' +
'facilisis venenatis quam a luctus. Nam egestas dignissim viverra. ' +
'Curabitur volutpat, enim et luctus faucibus, ex nisl ultrices est, ' +
'in faucibus sapien libero vel arcu. Nullam placerat, mauris id ' +
'vestibulum sollicitudin, lacus leo finibus mauris, nec efficitur ' +
'neque ex sit amet arcu'
new Vue({
el: "#app",
data: {
items: [],
item: Vue.component('list-item'),
},
methods: {
addMore() {
if (this.items.length > 10000) return
for (let i = 0; i < 30; i++) {
this.items.push({
text: lorem.slice(0, 200 + Math.floor(Math.random() * 500)) + ' ...',
img: Math.floor(Math.random() * 1000),
})
}
},
},
created() {
this.addMore()
},
})
5.所有可能的props。
// 传递给项的数据数组
itemsData: { type: Array, required: true },
// 物体的大致高度(在第一次渲染时使用)
itemHeight: { type: Number, required: true },
// Vue js item component
itemComponent: { type: [Object, Function], required: true },
// Height of rendered part relative to viewport height
renderViewports: { type: Number, default: 3 },