vue-recyclerview:Vue 超大数据列表解决方案

栏目: 编程语言 · 发布时间: 7年前

内容简介:vue-recyclerview:Vue 超大数据列表解决方案

vue-recyclerview

Mastering Large Lists with the vue-recyclerview

Preview

vue-recyclerview:Vue 超大数据列表解决方案

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

MIT

the project inspired by infinite-scroller


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

DIV+CSS网站布局从入门到精通

DIV+CSS网站布局从入门到精通

2011-1 / 58.00元

《DIV+CSS网站布局从入门到精通》介绍了商业类型的网页设计,以及目前流行的div+CSS标准布局方法和实战技法。通过十个经典案例,分别从不同类型网站的布局风格以及实现方法来讲解div+CSS网页布局和制作方法。全书系统地讲解了CSS样式的基础理论和实际运用技术,并结合实例来讲解层叠样式表与层布局相结合制作网页的方法。在实例制作过程中除了介绍CSS样式设计各方面的知识外,还结合实际网页制作中可能......一起来看看 《DIV+CSS网站布局从入门到精通》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

html转js在线工具
html转js在线工具

html转js在线工具