JSFiddle - React, Tailwind, and code Playground

vue-virtual-scroller try

by Christopher O

HTML

<link rel="stylesheet" href="https://cdn.rawgit.com/Akryum/vue-virtual-scroller/master/dist/vue-virtual-scroller.css"/>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.core.min.js"></script> -->
<script src="https://cdn.rawgit.com/Marak/faker.js/master/examples/browser/js/faker.js"></script>

<script src="https://cdn.rawgit.com/Akryum/vue-virtual-scroller/master/dist/vue-virtual-scroller.min.js"></script>

<div id="app">
  <my-list :list="list"></my-list>
</div>
<!-- {{ list }} -->

CSS

.scroller {
    overflow-y: scroll;
  overflow-x: none;
  /* position: absolute; */
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  /* height: 90%;*/
  height: 300px;
  width: 250px;
  border: 1px solid blue;
}

.user {
  height: 20px;
  /* padding: 0 12px;
  display: flex;
  align-items: center; */
}

JavaScript

console.clear();

Vue.component('recycle-scroller', VueVirtualScroller.RecycleScroller)
//Vue.component('dynamic-scroller', VueVirtualScroller.DynamicScroller)
Vue.component('my-list', {
props:['list'],
template:`
<recycle-scroller
    class="scroller"
    :items="list"
    :item-height="20"
    keyField="i"
  >
    <div slot-scope="{item}" class="user">
      <strong>{{ item.i }}:</strong> {{ item.text }}
    </div>
  </recycle-scroller>
`
/* template:`
  <DynamicScroller
    :items="list"
    :min-item-height="20"
    class="scroller"
  >
    <template slot-scope="{ item, index, active }">
      <DynamicScrollerItem
        :item="item"
        :active="active"
        :size-dependencies="[
          item.message,
        ]"
        :data-index="index"
      >
        <div class="text"><strong>{{ item.i }}:</strong> {{ item.text }}</div>
      </DynamicScrollerItem>
    </template>
  </DynamicScroller>
` */
})
new Vue({
  el: "#app",
  async created() {
  	
    
    for (var i = 1; i < 50000; i++) {
      let item = { i, text: faker.name.findName() }
      this.$set(this.dict, i, item)
    }
    
    
    
    await timeout()
    
    let id = '2'
    /* let yoyo = this.dict[id]
    
    yoyo.text = 'UPDATED'
    //this.dict[id] = yoyo
    this.$set(this.dict, id, yoyo) */
    
    // Update
    this.dict[id].text = 'UPDATED'
    
    // Create
    this.$set(this.dict, (this.dict.length+1), { i, text: "NEW: " + faker.name.findName() })
    
  },
  data: {
  	dict: {},
  },
  computed: {
 		list() {
    	return Object.values(this.dict)
    }
  }
})

function timeout(t = 1000) {
	return new Promise(r => setTimeout(r, t))
}