有你在真好 的个人博客
想解决vue的超大数据列表性能慢的问题?
阅读:2292 添加日期:2021/3/27 23:18:21 原文链接:https://www.toutiao.com/item/6833561496102896128/

在移动端处理下拉大量的数据时,会出现性能瓶颈。那如何解决呢!

Vue-recyclerview是你的一个不错的解决方案,页面采用的动态布局,自动回收机制来解决性能问题。

想解决vue的超大数据列表性能慢的问题?
  • 直接下载/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


ICP备案号:苏ICP备14035786号-1 苏公网安备 32050502001014号