在移动端处理下拉大量的数据时,会出现性能瓶颈。那如何解决呢!
Vue-recyclerview是你的一个不错的解决方案,页面采用的动态布局,自动回收机制来解决性能问题。
- 直接下载/CDN
unpkg.com提供基于NPM的CDN链接。上面的链接将始终指向NPM的最新版本。您还可以通过诸如
https://unpkg.com/vue-recyclerview/dist/vue-recyclerview.js之类的 URL使用特定版本/标签。
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-recyclerview/dist/vue-recyclerview.js"></script>
- NPM
$ npm install vue-recyclerview
main.js
import Vue from 'vue'
import VueRecyclerviewNew from 'vue-recyclerview'
Vue.use(VueRecyclerviewNew)
App.vue
<template>
<div id="app">
<RecyclerView
:prerender="30"
style="height: calc(100vh - 50px)"
:fetch="MiFetch"
:item="MiItem"
:tombstone="MiTomstone"
></RecyclerView>
</div>
</template>
<script>
import MiItem from './MiItem.vue'
import MiTomstone from './MiTombstone.vue'
import MiFetch from './mi-fetch'
export default {
name: 'app',
data () {
return {
MiFetch,
MiItem,
MiTomstone
}
}
}
</script>
具体信息参考:
https://github.com/hilongjw/vue-recyclerview/blog/master/README.md