infinite-scroll-for-vue
vue不定高的无限滚动插件
安装
Using npm:
$ npm install infinite-scroll-for-vue
Using yarn:
$ yarn add infinite-scroll-for-vue
配置 Attributes
{
datas: {// 数据列表
default: () => {
return [];
},
type: Array,
},
defHeight: {// 计算默认高度
default: 50,
type: Number,
}
}
方法 Methods
{
getAllList // 获取列表全部数据
}
Example
<template>
<div id="app">
<div style="height: 100%">
<Scroll ref="Scroll" :datas="list">
<template v-slot:default="slotProps">
<div class="TestItem">
<span>{{ slotProps.item.name }}|{{ slotProps.item.scrollTop }} | {{ slotProps.item.scrollHeight }}</span>
<span>{{ slotProps.item.text }}</span>
<input type="text" v-model="slotProps.item.text" />
</div>
</template>
</Scroll>
</div>
</div>
</template>
<script>
export default {
name: "App",
components: {},
data() {
return {
list: [],
};
},
mounted() {
let x = parseInt(Math.random() * 10);
for (let i = 0; i <= 4000; i++) {
if (i % x === 0) {
this.list.push({ name: i, text: this.randomString(Math.random() * 5000) });
} else {
this.list.push({ name: i, text: this.randomString(Math.random() * 1000) });
}
}
},
methods: {
randomString(e) {
e = e || 32;
var t = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678",
a = t.length,
n = "";
for (let i = 0; i < e; i++) {
n += t.charAt(Math.floor(Math.random() * a));
}
return n;
},
},
};
</script>