内容简介: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超低内存遍历目录文件和读取超大文件
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
UML基础与Rose建模教程
人民邮电出版社 / 人民邮电出版社 / 2006-1 / 36.00元
《UML基础与Rose建模教程》全面,详细地介绍了 UML 的基础知识和Rational Rose的使用方法,并通过4个综合性的案例,展示了使用UML和Rose进行软件建模的具体方法和步骤。全书共分20章,前4章是基础部分,介绍了UML和Rose的基础知识;第5章到第13章是《UML基础与Rose建模教程》的重点,介绍了UML的9种图和组成元素,以及相关的建模技术,并在每章的最后介绍了各种图在Ro......一起来看看 《UML基础与Rose建模教程》 这本书的介绍吧!