JSFiddle - React, Tailwind, and code Playground

vue-virtual-scroller try 3

by Christopher O

HTML

<link rel="stylesheet" href="https://cdn.rawgit.com/Akryum/vue-virtual-scroller/master/dist/vue-virtual-scroller.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

<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.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">
  <input placeholder="Search" type="text" class="headSearchBox" v-model="headSearch" /> Records: {{dispCount}}
  <my-list :list="listSorted"></my-list>
  <p>{{someInfo}}</p>
</div>
<!-- {{ list }} -->

CSS

.scroller {
  overflow-y: scroll;
  overflow-x: none;
  height: 300px;
  width: 300px;
  border: 1px solid blue;
  margin-top:5px;
}

.user {
  height: 60px;
  border-bottom: 1px solid grey;
  white-space: nowrap;
}

.user:hover {
  background: green;
  color: white;
}

.headSearchBox{
  width:150px;
}

/*   ---------------------------------------------   */
.lstname{
  /* float:left; */
  font-weight:bold;
}
.lstwhen{
  float:right;
}
.lstmsg{

}
.cicon{
  margin-left: 15px;
  font-size: 12px;
  opacity: 0.5;
}

.cinfo{
  margin-left: 5px;
  font-size: 12px;
  opacity: 0.8;
}


.ur{
    float:right;
    display: block;
    color: #fff;
    font-weight:bold;
    /*border: 1px solid #AEAEAE;*/
    border-radius: 30px;
    background-color: lightgreen;
    font-size: 10px;
    line-height: 0px;
    padding: 8px;
}

/*  BEGIN Convo Del Button  */
div.user:hover input.deleteBtn {
    display: block;
}
div.user input.deleteBtn {
    position:absolute; /* parent must have "position: relative" hardset; */
    display:none;
    top:-7px;
    left:1px;
}

.deleteBtn{
    cursor:pointer;
    color: #000;
    border: 1px solid #AEAEAE;
    border-radius: 30px;
    background: #ddd;
    font-size: 10px;
    font-weight: bold;
    display: inline-block;
    line-height: 0px;
    padding: 8px 3px;
    opacity: 0.4;
}
.deleteBtn:hover{
  background: #f00;
  border: 1px solid #f00;
  color: #fff;
  opacity: 1;
}
/*  END Convo Del Button  */

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="60"
    keyField="i"
  >
    <div slot-scope="{item}" class="user" v-on:click="headClick(item.i)" v-on:dblclick="doubleClicky(item.i)">
      <span class="lstname">{{ item.n }}</span>
      <span class="cicon">
        <i v-if="item.c === 'b'" class="fas fa-envelope" title="SMS"></i>
        <i v-else-if="item.c === 's'" class="fas fa-envelope" title="SMS (old)"></i>
        <i v-else-if="item.c === 'f'" class="fab fa-facebook-messenger" title="Facebook"></i>
        <i v-else-if="item.c === 'i'" class="fab fa-instagram" title="Instagram"></i>
        <i v-else-if="item.c === 'wa'" class="fab fa-whatsapp" title="Whatsapp"></i>
        <i v-else-if="item.c === 'sc'" class="fab fa-snapchat" title="Snapchat"></i>
        <i v-else-if="item.c === 'in'" class="fab fa-linkedin" title="Linkedin"></i>
        <i v-else-if="item.c === 'w'" class="fas fa-desktop" title="Web Browser"></i>
      </span>
      <span class="cinfo">{{ item.tc }}</span>
      <span class="lstwhen"><span class="timeago" v-bind:title="item.d"></span></span>
      <br class="clearflt"/>
      <span class="lstmsg">{{ item.b }}</span>
      <input class="deleteBtn" type="button" value="X" v-on:click="headDelClick(item.id)" title="Delete Convo" />
      <span class="ur" v-if="item.ur || item.ur != 0">{{ item.ur }}</span>
    </div>
  </recycle-scroller>
`,
/*template:`
<recycle-scroller
    class="scroller"
    :items="list"
    :item-height="20"
    keyField="i"
  >
    <div slot-scope="{item}" class="user" v-on:click="headClick(item.i)" v-on:dblclick="doubleClicky(item.i)">
      <strong>{{ item.i }}:</strong> {{ item.n }} {{ item.c }} {{ item.tc }}
    </div>
  </recycle-scroller>
`,
 template:`
  <DynamicScroller
...