内容简介:vue-recyclerview:Vue 超大数据列表解决方案
vue-recyclerview
Mastering Large Lists with the vue-recyclerview
Preview
Demo
https://hilongjw.github.io/vue-recyclerview/
Requirements
Vue 2.0 +
Install
npm i vue-recyclerview
<script src="https://unpkg.com/vue-recyclerview"></script>>
Usage
<template> <div id="app"> <RecyclerView :prerender="30" key="mi" class="recyclerview mi-list" :fetch="MiFetch" :item="MiItem" :tombstone="MiTomstone" ></RecyclerView> </div> </template> <script> import Vue from 'vue' import RecyclerView from 'vue-recyclerview' import MiItem from './components/MiItem.vue' import MiTomstone from './components/MiTombstone.vue' const totalCount = 1000 const MiFetch = function fetch (count, items) { count = Math.max(30, count) return new Promise((resolve, reject) => { setTimeout(() => { resolve([ ... mockData]) }, 200) }) .then(list => { return { list: list, count: totalCount } }) } export default { name: 'app', data () { return { MiFetch: MiFetch, MiItem, MiTomstone } }, components: { RecyclerView: RecyclerView(Vue) } </script>
item
<template> <li class="mi-item"> <a class="version-item"> <div class="version-item-img"> <img class="lazy" :src="data.img_url"> </div> <div class="version-item-intro"> <div class="version-item-name"> <p>{{data.name}}</p> </div> <div class="version-item-brief"> <p>{{ data.product_comment }}</p> </div> <div class="version-item-intro-price"> <span>{{ data.price_min }}</span> </div> </div> </a> </li> </template> <script> export default { props: { data: Object } } </script>
tombstone
<template> <li class="mi-item tombstone"> <a class="version-item"> <div class="version-item-img"> <img class="lazy" src="//i8.mifile.cn/v1/a1/76f98ed9-86c5-dcda-0ba2-b79f62b0f195.webp?width=360&height=360"> </div> <div class="version-item-intro"> <div class="version-item-name"> <p></p> </div> <div class="version-item-brief"> <p></p> </div> <div class="version-item-intro-price"> <span>00.00</span> </div> </div> </a> </li> </template>
License
the project inspired by infinite-scroller
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 超大7k高清显示器显示网页解决方案
- 快手超大规模集群调度优化实践
- MySQL自增id超大问题查询
- 超大屏数据可视化总结-智慧城市
- 超大文件上传之计算文件MD5值
- PHP超低内存遍历目录文件和读取超大文件
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。