iscroll vue
虚拟无限滚动 (vue-virtual-infinite-scroll)
a vue2 component based on Iscroll, supports big data list with high performance scroll, infinite load and pull refresh.
一个基于Iscroll的vue2组件,支持具有高性能滚动,无限加载和拉动刷新的大数据列表。
Based on Iscroll, support iscroll configure options
基于Iscroll,支持iscroll配置选项
Reuse the DOM element to get high performance in big data list
重用DOM元素以在大数据列表中获得高性能
Support fixed height and variable height.
支持固定高度和可变高度。
Support bottom loadmore and pulldown refresh event
支持底部loadmore和下拉刷新事件
uncheck the virtual scroll means a normal big data list not use our component. It is used for performance comparison.
取消选中虚拟滚动条意味着正常的大数据列表不使用我们的组件。 用于性能比较。
如何使用 (How to use)
npm install vue-virtual-infinite-scroll --save
import virtualScroll from 'vue-virtual-infinite-scroll'
import 'vue-virtual-infinite-scroll/dist/css/vue-virtual-infinite-scroll.css'
Vue.component('virtual-list', virtualScroll)
<template>
<div class="demo">
<virtual-list ref="scroller" :items="items" uniqueKey="id" :iscrollOptions="options" :variable="variable" :infinite="true" :pulldown="true" @loadMore="getMoreData" @pullRefresh="refreshData">
<template slot="content" slot-scope="props">
<div class="demo-item">
<span>
{{props.item.text}}
</span>
<img src="./assets/demo.jpeg" />
</div>
</template>
</virtual-list>
</div>
</template>
<script>
export default {
name: 'demo',
data () {
return {
items: [],
options: {
scrollbars: true,
interactiveScrollbars: true,
probeType: 3,
mouseWheel: true,
mouseWheelSpeed: 1
},
variable: false
}
},
created () {
let list = []
for (let i = 0; i < 100; i++) {
list.push({
text: i,
id: i,
height: Math.max(Math.floor(Math.random() * 50), 20)
})
}
this.items = list
},
methods: {
getMoreData ($stateChange) {
if (this.items.length > 1000) {
$stateChange('complete')
} else {
setTimeout(() => {
let length = this.items.length
for (let i = length; i < length + 20; i++) {
this.items.push({
text: i,
id: i,
height: Math.max(Math.floor(Math.random() * 50), 20)
})
}
$stateChange('loaded')
}, 1500)
}
},
refreshData ($pullStateChange) {
setTimeout(() => {
this.items.splice(0)
for (let i = 0; i < 50; i++) {
this.items.push({
text: i,
id: i,
height: Math.max(Math.floor(Math.random() * 50), 20)
})
}
$pullStateChange('complete')
}, 1500)
},
}
</script>
<style lang="postcss">
.demo {
position: absolute;
top: 20px;
bottom: 20px;
left: 10px;
right: 10px;
}
</style>
注意 (Notice)
You should init the items array during your own component created function before the vue-virtual-infinite-scroll component created.
在创建vue-virtual-infinite-scroll组件之前,应在自己的组件创建函数期间初始化items数组。
You should put the vue-virtual-infinite-scroll component during a parent component, and set a css position property(relative, absolute or fixed) to the parent component.
您应该将vue-virtual-infinite-scroll组件置于父组件中,并为父组件设置css position属性(相对,绝对或固定)。
道具配置 (Prop Configures)
Prop | Type | Required | Default | Description |
---|---|---|---|---|
items | Array | ✓ | [] | The list expected to render, each item in the list should contain id arrtibute for the unique identify, and in variable height mode, it should also contain height attribute with a string or number value. eg: [{ id: 1, height: 40 }, { id:2, height: 50 }] |
uniqueKey | String | ✓ | 'id' | The unique key for each list item |
iscrollOptions | Object | * | {} | The iscroll configure options. http://iscrolljs.com/#configuring |
variable | Boolean | * | false | Define the height mode of list item. If false, the component will get the item height automatically. If true, you should set the 'height' property to each item in the prop 'items' |
bufferSize | Number | * | 5 | Define the top and bottom buffer item size. It is used to cache the scoll item out of the visable component area, the larger the bufferSize, the higher the scroll performance will achieved. |
infinite | Boolean | * | false | True means you want to use the loadMore function when the component scolled to the bottom |
distance | Number | * | 50 | The loadMore infinite function will be called when scrolled into the distance value from bottom |
loadMore | Function | * | The custom function called when prop infinite is true and component scrolled into the distance value from bottom. It has a callback param which can controll the loader state(see the How to use) | |
pulldown | Boolean | * | false | True means you want to use the pullRefresh function when the component pulled out of the top boundary |
pullRefresh | Function | * | The custom function called when prop pulldown is true and the component pulled out the top boundary and released. It has a callback param which can controll the puller state(see the How to use) | |
pulldownText | Object | * | { begin: '下拉刷新',trigger: '释放更新',refresh: '更新中...',complete: '更新完成',error:'更新失败'} | The custom text object used to show in pull refresh |
Struts | 类型 | 需要 | 默认 | 描述 |
---|---|---|---|---|
项目 | 数组 | ✓ | [] | 预期要呈现的列表,列表中的每个项目都应包含ID arrtibute用于唯一标识,并且在可变高度模式下,它还应包含带有字符串或数字值的height属性。 例如:[{id:1,高度:40},{id:2,高度:50}] |
uniqueKey | 串 | ✓ | 'ID' | 每个列表项的唯一键 |
iscrollOptions | 目的 | * | {} | iscroll配置选项。 http://iscrolljs.com/#configuring |
变量 | 布尔型 | * | 假 | 定义列表项的高度模式。 如果为false,则组件将自动获得项目高度。 如果为true,则应为prop'items'中的每个项目设置'height'属性 |
缓冲区大小 | 数 | * | 5 | 定义顶部和底部缓冲区的大小。 它用于将scoll项缓存到可见组件区域之外,bufferSize越大,将实现更高的滚动性能。 |
无限的 | 布尔型 | * | 假 | True表示您希望在组件倾斜到底部时使用loadMore函数 |
距离 | 数 | * | 50 | 从底部滚动到距离值时,将调用loadMore无限函数 |
装载更多 | 功能 | * | 当prop infinite为true且组件从底部滚动到距离值时调用的自定义函数。 它有一个回调参数,可以控制加载程序的状态(请参阅“如何使用”) | |
拉下 | 布尔型 | * | 假 | True表示当组件从顶部边界拉出时要使用pullRefresh函数 |
pullRefresh | 功能 | * | 当prop pulldown为true且组件拉出顶部边界并释放时调用的自定义函数。 它具有一个回调参数,可以控制上拉器的状态(请参阅“如何使用”) | |
pulldownText | 目的 | * | {begin:'刷新刷新',trigger:'释放更新',refresh:'更新中...',complete:'更新完成',error:'更新失败'} | 用于在拉动刷新中显示的自定义文本对象 |
插槽配置 (Slot Configures)
Slot | Description |
---|---|
content | each list item content |
infiniteLoader | the bottom infinite loader |
插槽 | 描述 |
---|---|
内容 | 每个列表项的内容 |
无限加载器 | 底部无限装载器 |
翻译自: https://vuejsexamples.com/a-vue2-component-based-on-iscroll/
iscroll vue