hilongjw/vue-recyclerview

Mastering Large Lists with the vue-recyclerview

vue-recyclerview's Issues

能否实现拉到底的时候再加载，而不是快拉到底时提前预加载

能否实现拉到底的时候再加载，而不是快拉到底时提前预加载，因为这样的用户体验更好一点

Simplified usage

I find it a little verbose and unnecessary to use this component like:

components: {
   RecyclerView: RecyclerView(Vue)
}

---

Instead, maybe introduce a simplified usage, as plugin:

import Vue from 'vue'
import { recyclerview } from 'recyclerview'

Vue.use(recyclerview)

As local component:

import { RecyclerView } from 'recyclerview'

export default {
  components: { RecyclerView }
}

As global component:

import Vue from 'vue'
import { RecyclerView } from 'recyclerview'

Vue.component(RecyclerView.name, RecyclerView)

Prerender and Remain default values

Prerender and remain default values are not working.

If I don't set a value for prerender prop the component won't render any node.

提一下意见，这库不好用

希望是<recyclerv-view><我的v-for></recyclerv-view>这样来使用，而不是把我的v-for抽离出来然后传参进去，这样一点都不好用。希望采纳

Scrolling to last index in list (bottom) render problem

Hi @hilongjw, excelente method for scrolling to index but when you set the last index of list the recyclerview renders to many tombstones in dom.

Thanks again!

Edited: It doesn't render items it renders to many tombstones

Errors beforeDestroy component

Testing the component I get errors when I go to another route before destroying the component.

Example:

Error in beforeDestroy hook: "TypeError: Cannot read property 'height' of undefined"

found in

---> <RecyclerView>
       <Thread> at C:\wamp64\www\vue_mobile_material\src\components\thread\Thread.vue
         <QLayout>
           <Layout> at C:\wamp64\www\vue_mobile_material\src\components\Layout.vue
             <App> at C:\wamp64\www\vue_mobile_material\src\App.vue
               <Root>

this.options.usePrefix - Cannot read property "usePrefix" of undefined

this.options.usePrefix - Cannot read property "usePrefix" of undefined

Feature: Fetch on scrolling up, not bottom

I'm trying to implement this but I can get to figure it out.

I want to set delta (or is the anchorScroll?) to be offseted on the top. So only when user scrolls up the fetch function executes and unshifts more items to the recyclerview list. This only will be used in the case scenario that the user starts from the bottom.

Ex: items [a,b,c,d,e] Scrolls up. New items [f,g,h,i] => Items [f,g,h,i,a,b,c,d,e] (index will be in order i know, but not content]

This is the perfect way to implement this component for a chat option (Example: gitter, whatsapp, etc). Because if every item must by fetched by the component to scroll to last index the user experience will decay when you have thousands of items.

Thanks! If you could guide what should be done I can give a try and do a pull request.

Example confussing

Hi I having several issue to reproduce the example with my own data. I don't get why those al fetch functions are needed (query, getItem(), etc). Don't understand de purpose of limit and skip (suppose they are used inside component but don't know what they do).

Tombstone is needed obligatory? Should be an option.

Please if you could give an example by declaring all the functions as methods (if possible, declared out of vue makes "this" unusable) and using data in the component or vuex.

Thanks and great component!

Enhancement: Tombstone height defines how many elements get set in DOM

Hi, one question. Why when the tombstone is for example 1px I get more nodes in de the DOM and when it's higher I get less?

Although, if for example I set a tombstone with a height of more pixels than the chat messages the chunks of messages that I get are more separated from each other. The transform position its really offsetted. That did not happened on your chat demo (that actually now is not working 😛).

Thanks again!

Append/Prepend/Update

Hi again @hilongjw sorry for opening another issue XD.

I was wondering if there is any method or way to append/prepend data to the recyclerview? Or make the view update with new pushed data to the array that has the data?

Uso of case: chat app. You have your recyclerview and an incoming message pushes to the array that has all the messages (stored in vuex for example) and recyclerview must update it's list with the new coming message.

Is this possible?

Thanks again!

Plugins props are always undefined

Version

0.4

Reproduction link

https://jsfiddle.net/ykxwarhh/33/

What is expected?

i18n and router (or other plugins) should be bind to item component.

What is actually happening?

$router is undefined inside item instance same problem with 18n.

element-ui table 怎么使用呢？

Is it possible to pass extra props to component?

Currently it looks like this:
<RecyclerView :prerender="30" :fetch="MiFetch" :item="MiItem" :tombstone="MiTomstone" ></RecyclerView>

and RecyclerView will pass only one props data to item.

Is it possible somehow to pass extra props like this
<RecyclerView :prerender="30" :fetch="MiFetch" :item="MiItem" :tombstone="MiTomstone" :propOne="myProp1" :propTwo="myProp2" ></RecyclerView>
Thanks

作者啊，给个浏览器端集成的例子吧

作者啊，给个浏览器端集成的例子吧

可以用在微信小程序上吗？mpvue框架？

Suggestion: Start list from end

Hi again,

following the other issue (#6) of the chat app idea it would be great to have a method that let us start from the end of the list. I tried setting a scrollTop but as nodes are rendering when you scroll the real scrollHeight it's not known until you reach the far bottom.

Thnks again!

使用瀑布流的时候，图片空白

使用瀑布流的时候，图片就算是已经加载过的，离开视野之后再回来就会出现白屏然后再绘制图片的问题，虽然不会触发远程请求，但是这个repaint白屏很不友好，有更好体验的方式吗？

刷新和回到顶部

能否有个回到顶部的按钮 并且下拉刷新

Parent component not accessable

I'am trying to access methods defined on the main component, is it missing or it just the documentation is not completed !!

this should help with global methods for all items.

Suport for multiple tombstone templates

Hello! This looks awesome btw. Great work.

Our list contains multiple templates and we currently use if statements to render different variations. Here is how our out current template markup looks like:

(example can be viewed here: https://codepen.io/Peety/pen/qmgZzE?editors=1010)

Here is our current template:

Me: {{item.keyword}}

<div class="feed-compas-arrow" v-if="item.itemType=='searchlocation'"></div>
 <div class="feed-query-location-addr"  v-if="item.itemType=='searchlocation'">
   Near: {{item.address}}
 </div>

<div class="feed-user-details feed-inset-item" v-if="item.itemType=='result'"> 
  <aside class="feed-user-tn" v-bind:style="getImageURLwithSuffix(item.thumbnailUrl, 'small', true)"></aside>
  <div class="feed-user-details-inner">
    <div class="feed-display-name" v-on:click="expand(item)">{{item.name}} </div>
    <timeago v-if="item.message.createdAt" :since="item.message.createdAt" :auto-update="60" class="feed-status-timestamp"></timeago>
    <div v-if="item.type=='business'">
      {{item.address}} <span class="feed-status-location-distance">({{convertDistance(item.distance)}})</span>
    </div>
    
  </div>
  <div class="feed-user-details-handle">
    <span v-if="item.handle">@</span>{{item.handle}}
  </div>
  <div class="feed-user-details-follow followed">
  </div>
</div>
<article class="feed-status-text feed-inset-item"  v-if="item.itemType=='result' && item.message.text"> 
  {{item.message.text}}
</article>
<div class="feed-status-image"  v-if="item.itemType=='result' && item.message.imageUrl">
  
  <img v-bind:src="getImageURLwithSuffix(item.message.imageUrl, 'medium')"/>
  
</div>
<div class="feed-status-location-details feed-inset-item"  v-if="item.itemType=='result' && item.checkInAddress" >
  <div class="feed-status-location">
    <div class="feed-status-location-address">{{item.checkInAddress.address}}</div>
    <timeago :since="item.lastLocationSharedAt" :auto-update="60" class="feed-status-location-timestapm"></timeago>
  </div>
  <div class="feed-status-location-distance">
    {{convertDistance(item.distance)}}
  </div>
</div>

{{item.favedTimes}}

{{item.message.sharedNo}}

{{item.phone}}

    <div class="feed-item-hours-line" v-for="(day, key, index) in item.hours">
      <div class="feed-item-hours-day">
        {{toUpperCase(key)}}
      </div>
       <div class="feed-item-hours-times">
         <span v-for="hours in day">{{joinHours(hours)}}<br></span>
        </div>
    </div>
    
  </div>
  <div class="feed-item-expanded-line feed-item-more">More</div>
</aside>

As you can see we have several distinct item markups. We've tried to implement the recycler view but with the app either crashes or the feed does not render render. Any ideas why?

Looking at how a React component handles infinite scrolling (below), I wonder if there is a prop we can use for vaiable tombstone height to prevent mem issues that may be cause of crash.
https://github.com/orgsync/react-list see the itemSizeEstimator(index, cache)
https://github.com/seatgeek/react-infinite (passing an array of height estimates)
https://github.com/Radivarig/react-infinite-any-height

Thanks for any help!

...btw good resources we found helpful for anyone looking into RecyclerView

1. https://medium.com/@talkol/recycling-rows-for-high-performance-react-native-list-views-628fd0363861 (ReactNative but a good rundown)
2. bvaughn/react-virtualized#25

How to update the List after render?

How to update the List after render?