vue-router 示例_关于使用vue-recyclerview掌握大型列表的示例

vue-router 示例

vue-recyclerview (vue-recyclerview)

Mastering Large Lists with the vue-recyclerview.

使用vue-recyclerview掌握大型列表。

特征 (Feature)

DOM recyleing Multiple column Waterflow

DOM回收多柱水流

View demo 查看演示 Download Source 下载源

安装 (Installation)

直接下载/ CDN (Direct Download / CDN)

https://unpkg.com/vue-recyclerview/dist/vue-recyclerview

https://unpkg.com/vue-recyclerview/dist/vue-recyclerview

unpkg.com provides NPM-based CDN links. The above link will always point to the latest release on NPM. You can also use a specific version/tag via URLs like https://unpkg.com/vue-recyclerview/dist/vue-recyclerview.js

unpkg.com提供基于NPM的CDN链接。 上面的链接将始终指向NPM的最新版本。 您还可以通过诸如https://unpkg.com/vue-recyclerview/dist/vue-recyclerview.js之类的 URL使用特定版本/标签。

Include vue-recyclerview after Vue and it will install itself automatically:

在Vue之后包含vue-recyclerview，它将自动安装自身：

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-recyclerview/dist/vue-recyclerview.js"></script>

NPM (NPM)

$ npm install vue-recyclerview

When used with a module system, you must explicitly install the vue-recyclerview via Vue.use():

与模块系统一起使用时，必须通过Vue.use()显式安装vue-recyclerview ：

import Vue from 'vue'
import VueRecyclerviewNew from 'vue-recyclerview'

Vue.use(VueRecyclerviewNew)

You don't need to do this when using global script tags.

使用全局脚本标记时，您不需要这样做。

开发构建 (Dev Build)

You will have to clone directly from GitHub and build vue-recyclerview yourself if you want to use the latest dev build.

如果要使用最新的开发版本，则必须直接从GitHub克隆并vue-recyclerview构建vue-recyclerview 。

$ git clone[email protected]:hilongjw/vue-recyclerview.git node_modules/vue-recyclerview
$ cd node_modules/vue-recyclerview
$ npm install
$ npm run build

入门 (Getting Started)

We will be using ES2015 in the code samples in the guide.

我们将在指南的代码示例中使用ES2015 。

main.js (main.js)

// If using a module system (e.g. via vue-cli), import Vue and RecyclerView and then call Vue.use(RecyclerView).
// import Vue from 'vue'
// import RecyclerView from 'vue-recyclerview'
// import App from './App.vue'
// Vue.use(RecyclerView)

// Now the app has started!
new Vue({
  render: h => h(App)
}).$mount('#app')

应用程序 (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>

道具选项 (Props Options)

key	description	defualt	type/options
fetch	Data fetching function
list	List data of RecyclerView	[]
prerender	Number of items to instantiate beyond current view in the opposite direction.	20	Number
remain	Number of items to instantiate beyond current view in the opposite direction.	10	Number
column	Specifies how many columns the listings should be displayed in	1	Number
item	The Vue component of RecyclerView's item		Vue component
tombstone	The Vue component of RecyclerView's tombstone		Vue component
loading	The loading component behind the RecyclerView pull-to-refresh	built-in loading	Vue component

键	描述	脱脂	类型/选项
fetch	数据获取功能
list	列出RecyclerView的数据	[]
prerender	以相反的方向实例化超出当前视图的项目数。	20	数
remain	以相反的方向实例化超出当前视图的项目数。	10	数
column	指定列表应显示在多少列中	1个	数
item	RecyclerView项目的Vue组件		Vue组件
tombstone	RecyclerView的墓碑的Vue组件		Vue组件
loading	RecyclerView下拉刷新后的加载组件	内置加载	Vue组件

• fetch:Function

  获取：功能

function fetch (limit:Number, skip:Number) {
  return Promise.resolve({
    list: list // Array,
    count: count // Number
  })
}

• list

  清单

[
// item
{
  vm: vm, // <Vue Instance>
  data: {
    name: 'test'
  },
  node: null,
  height: 100,
  width: 100,
  top: 0,
}, 
// tombstone
{
  vm: null
  data: null,
  node: null,
  height: 100,
  width: 100,
  top: 0,
}]

实例方法 (Instance Method)

• scrollToIndex

  scrollToIndex

this.$refs.RecyclerView.scrollToIndex(100)

翻译自: https://vuejsexamples.com/a-example-about-mastering-large-lists-with-the-vue-recyclerview/

vue-router 示例