v2.0.0-alpha.4

by Theodore Messinezis

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/tailwind.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.js"></script>
<div id="app">
  <ul ref="ul" v-chat-scroll="{ handlePrepend: true }" class="bg-gray-800 m-0 px-8 py-4 overflow-x-auto" style="height: 50vh;">
    <li class="m-4 p-4 bg-white" v-for="message in messages">
      {{ message }}
    </li>
  </ul>
  
  <p class="text-center p-4 bg-red-700 text-white" v-if="loading">
  Loading messages...
  </p>
</div>

JavaScript

async function bacon() {
  const r = await fetch('https://baconipsum.com/api/?type=meat-and-filler&sentences=1');
  return (await r.json())[0];
}

new Vue({
  el: '#app',
  data: {
  	loading: false,
    messages: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
  },
  mounted() {
  	const el = this.$refs.ul;
    el.addEventListener('scroll', e => {
      if (el.scrollTop === 0) {
        this.loading = true;
        setTimeout(async () => {
          this.messages.unshift(...[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]);
          this.loading = false;
        }, 1000);
      } else {
      	this.prepending = false;
      }
    });
  }
})