Akryum vue-virtual-scroller recyclescroller

Example of Akryum's vue-virtual-scroller recyclescroller https://github.com/Akryum/vue-virtual-scroller

by Christopher O

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Akryum/vue-virtual-scroller/dist/vue-virtual-scroller.css">
<script src="https://cdn.jsdelivr.net/gh/Akryum/vue-virtual-scroller/dist/vue-virtual-scroller.min.js"></script>
<div id="app">
  <my-list :list="list"></my-list>
  {{ list }}
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

.scroller {
  height: 100%;
}

.user {
  height: 32%;
  padding: 0 12px;
  display: flex;
  align-items: center;
}

Vue

Vue.component('recycle-scroller', VueVirtualScroller.RecycleScroller);

Vue.component('my-list', {
props:['list'],
template:`
<recycle-scroller
    class="scroller"
    :items="list"
    :item-height="32"
  >
    <div slot-scope="{ item }" class="user">
      {{ item.name }}
    </div>
  </recycle-scroller>
`
});

new Vue({
  el: "#app",
  data: {
    list: [
      { id: 111, name: "Learn JavaScript", done: false },
      { id: 222, name: "Learn Vue", done: false },
      { id: 333, name: "Play around in JSFiddle", done: true },
      { id: 444, name: "Build something awesome", done: true }
    ]
  },
  methods: {
  	/* toggle: function(todo){
  	      todo.done = !todo.done
  	    } */
  }
})