vue-recycler-list

Github Page

Advantages

• DOM Recycling
• Async Dynamic Height Support, Auto Measure
• Pull Down Refresh And Loadmore Support

Installation

npm install --save vue-recycler-list

Usage

import RecyclerList from 'vue-recycler-list';

Vue.component('RecyclerList', RecyclerList);

Example

<template>
  <div id="app">
    <div class="main-container">
      <RecyclerList
      uniqueKey="id"
      :itemList="itemList"
      :hasMore="hasMore"
      :usePullDownRefresh="true"
      @loadmore="onLoadMore"
      @refresh="onRefresh"
      >
        <template slot="item" slot-scope="props">
          <li class="chat-item" @click="onItemClick(props)">
            <img class="avatar" width="48" height="48" :src="props.data.avatar">
            <div class="bubble">
                <p>{{props.data.message}}</p>
                <img width="400" height="300" :class="{invisible:!props.data.photo}" :src="props.data.photo">
                <div class="meta">
                    <time class="posted-date">{{props.data.createAt}}</time>
                </div>
            </div>
          </li>
        </template>
        <template slot="footer">
          <div v-show="showLoading">
            loading...
          </div>
        </template>
    </RecyclerList>
    </div>
  </div>
</template>

Props

|key|description|defualt|type/options| |:---|---|---|---| |itemList|List data of RecyclerList|[]|Array |uniqueKey|Field in item data, used to identify items and optimize rendered for 'v-for' of Vue.|'id'|String| | estimatedItemHeight|list item estimated height|68|Number| |hasMore|Use build-in loadmore feature or not.|false|Boolean| |loadawayItems|Trigger the 'loadmore' event when the list items to be displayed are less than loadawayItems.|10|Number| |runawayItems|The number of items beyond visable items.|5|Number| |opsrunawayItems|The number of items above visable items.|5|Number| |usePullDownRefresh|Use build-in pull down refresh feature or not.|false|Boolean| |pullDownOffset|The value of pixels of pull down to trigger 'refresh' event.|80|Number| |pullDownTips|The text of pull down to refresh.|'Pull to refresh'|String| |pullDownReleaseTips|The text of release to refresh.|'Pull to refresh'|String| |pullDownLoadingTips|The text of loading.|'Loading'|String|

Events

• loadmore : emitted when the list items to be displayed are less than the loadawayItems.

• refresh : emitted when the value of pixels of pull down large than the pullDownOffset.

Slots

• item
• footer

Reference

1. Complexities of an Infinite Scroller