Add chat-room example

Author: tangbc

example/src/App.vue

@@ -29,7 +29,6 @@ body {
 }
 
 #nav {
-  padding: 1em 0;
   @media (max-width: 640px) {
     padding: 0;
   }

example/src/common/user.js

@@ -1,178 +1,7 @@
 import { Random } from './mock'
 
-const topTypeArr = [
-  'NoHair',
-  'Eyepatch',
-  'Hat',
-  'Hijab',
-  'Turban',
-  'WinterHat1',
-  'WinterHat2',
-  'WinterHat3',
-  'WinterHat4',
-  'LongHairBigHair',
-  'LongHairBob',
-  'LongHairBun',
-  'LongHairCurly',
-  'LongHairCurvy',
-  'LongHairDreads',
-  'LongHairFrida',
-  'LongHairFro',
-  'LongHairFroBand',
-  'LongHairNotTooLong',
-  'LongHairShavedSides',
-  'LongHairMiaWallace',
-  'LongHairStraight',
-  'LongHairStraight2',
-  'LongHairStraightStrand',
-  'ShortHairDreads01',
-  'ShortHairDreads02',
-  'ShortHairFrizzle',
-  'ShortHairShaggyMullet',
-  'ShortHairShortCurly',
-  'ShortHairShortFlat',
-  'ShortHairShortRound',
-  'ShortHairShortWaved',
-  'ShortHairSides',
-  'ShortHairTheCaesar',
-  'ShortHairTheCaesarSidePart'
-]
-const accessoriesTypeArr = [
-  'Blank',
-  'Kurt',
-  'Prescription01',
-  'Prescription02',
-  'Round',
-  'Sunglasses',
-  'Wayfarers'
-]
-const facialHairTypeArr = [
-  'Blank',
-  'BeardMedium',
-  'BeardLight',
-  'BeardMagestic',
-  'MoustacheFancy',
-  'MoustacheMagnum'
-]
-const facialHairColor = [
-  'Auburn',
-  'Black',
-  'Blonde',
-  'BlondeGolden',
-  'Brown',
-  'BrownDark',
-  'Platinum',
-  'Red'
-]
-const clotheTypeArr = [
-  'BlazerShirt',
-  'BlazerSweater',
-  'CollarSweater',
-  'GraphicShirt',
-  'Hoodie',
-  'Overall',
-  'ShirtCrewNeck',
-  'ShirtScoopNeck',
-  'ShirtVNeck'
-]
-const clotheColor = [
-  'Black',
-  'Blue01',
-  'Blue02',
-  'Blue03',
-  'Gray01',
-  'Gray02',
-  'Heather',
-  'PastelBlue',
-  'PastelGreen',
-  'PastelOrange',
-  'PastelRed',
-  'PastelYellow',
-  'Pink',
-  'Red',
-  'White'
-]
-const graphicTypeArr = [
-  'Bat',
-  'Cumbia',
-  'Deer',
-  'Diamond',
-  'Hola',
-  'Pizza',
-  'Resist',
-  'Selena',
-  'Bear',
-  'SkullOutline',
-  'Skull'
-]
-const eyeTypeArr = [
-  'Close',
-  'Cry',
-  'Default',
-  'Dizzy',
-  'EyeRoll',
-  'Happy',
-  'Hearts',
-  'Side',
-  'Squint',
-  'Surprised',
-  'Wink',
-  'WinkWacky'
-]
-const eyebrowTypeArr = [
-  'Angry',
-  'AngryNatural',
-  'Default',
-  'DefaultNatural',
-  'FlatNatural',
-  'RaisedExcited',
-  'RaisedExcitedNatural',
-  'SadConcerned',
-  'SadConcernedNatural',
-  'UnibrowNatural',
-  'UpDown',
-  'UpDownNatural'
-]
-const mouthTypeArr = [
-  'Concerned',
-  'Default',
-  'Disbelief',
-  'Eating',
-  'Grimace',
-  'Sad',
-  'ScreamOpen',
-  'Serious',
-  'Smile',
-  'Tongue',
-  'Twinkle',
-  'Vomit'
-]
-const skinColorArr = [
-  'Tanned',
-  'Yellow',
-  'Pale',
-  'Light',
-  'Brown',
-  'DarkBrown',
-  'Black'
-]
-
 const getRandomAvatar = () => {
-  return 'https://avataaars.io/?' + [
-    'avatarStyle=Transparent',
-    `topType=${Random.pick(topTypeArr)}`,
-    `accessoriesType=${Random.pick(accessoriesTypeArr)}`,
-    `hatColor=${Random.pick(facialHairTypeArr)}`,
-    `facialHairType=${Random.pick(facialHairTypeArr)}`,
-    `facialHairColor=${Random.pick(facialHairColor)}`,
-    `clotheType=${Random.pick(clotheTypeArr)}`,
-    `clotheColor=${Random.pick(clotheColor)}`,
-    `graphicType=${Random.pick(graphicTypeArr)}`,
-    `eyeType=${Random.pick(eyeTypeArr)}`,
-    `eyebrowType=${Random.pick(eyebrowTypeArr)}`,
-    `mouthType=${Random.pick(mouthTypeArr)}`,
-    `skinColor=${Random.pick(skinColorArr)}`
-  ].join('&')
+  return `https://avatars1.githubusercontent.com/u/${Random.integer(10000, 99999)}`
 }
 
 export default () => {

example/src/views/chat-room/Item.vue

@@ -53,7 +53,7 @@ export default {
     padding-left: 1em;
     font-size: 16px;
     .name {
-      color: #9b4cca;
+      padding-bottom: .2em;
     }
     .content {
       position: relative;

example/src/views/chat-room/Main.vue

@@ -3,6 +3,7 @@
     <github-corner />
 
     <div class="main">
+      <h3>{{ messages.length }}</h3>
       <div class="list">
         <virtual-list class="stream scroll-touch" ref="vsl"
           :size="80"
@@ -11,8 +12,14 @@
           :data-sources="messages"
           :data-component="messageComponent"
           :item-class="'stream-item'"
-          @totop="eventTotop"
-        />
+          @resized="onItemRendered"
+          @totop="onTotop"
+        >
+          <div slot="header" class="header">
+            <div class="spinner" v-show="!finished"></div>
+            <div class="finished" v-show="finished">No more data</div>
+          </div>
+        </virtual-list>
       </div>
       <massage-eidtor />
     </div>
@@ -22,7 +29,7 @@
 <script>
 import Item from './Item'
 import Editor from './Editor'
-import { getMessages } from './util'
+import { getMessages, getSids } from './util'
 
 export default {
   name: 'chat-room',
@@ -33,26 +40,80 @@ export default {
 
   data () {
     return {
+      finished: false,
       messages: [],
       messageComponent: Item,
     }
   },
 
   created () {
-    getMessages(3).then((messages) => {
+    this.param = {
+      pageSize: 10,
+      isFirstPageReady: false,
+    }
+
+    // first page request
+    getMessages(this.param.pageSize).then((messages) => {
       this.messages = this.messages.concat(messages)
     })
   },
 
-  mounted () {
-    // if (this.$refs.vsl) {
-    //   this.$refs.vsl.scrollToBottom()
-    // }
-  },
+  // mounted () {
+  //   window.vsl = this.$refs.vsl
+  // },
 
   methods: {
-    eventTotop () {
-      console.log('eventTotop')
+    onTotop () {
+      // get next page
+      getMessages(this.param.pageSize, true).then((messages) => {
+        if (!messages.length) {
+          this.finished = true
+          return
+        }
+
+        this.setVirtualListToOffset(1)
+
+        const sids = getSids(messages)
+        this.messages = messages.concat(this.messages)
+        this.$nextTick(() => {
+          const vsl = this.$refs.vsl
+          const offset = sids.reduce((previousValue, currentSid) => {
+            const previousSize = typeof previousValue === 'string' ? vsl.getSize(previousValue) : previousValue
+            return previousSize + this.$refs.vsl.getSize(currentSid)
+          })
+          this.setVirtualListToOffset(offset)
+        })
+      })
+    },
+
+    onItemRendered () {
+      if (!this.$refs.vsl) {
+        return
+      }
+
+      // first page items are all mounted, scroll to bottom
+      if (!this.param.isFirstPageReady && this.$refs.vsl.getSizes() >= this.param.pageSize) {
+        this.param.isFirstPageReady = true
+        this.setVirtualListToBottom()
+      }
+    },
+
+    setVirtualListToIndex (index) {
+      if (this.$refs.vsl) {
+        this.$refs.vsl.scrollToIndex(index)
+      }
+    },
+
+    setVirtualListToOffset (offset) {
+      if (this.$refs.vsl) {
+        this.$refs.vsl.scrollToOffset(offset)
+      }
+    },
+
+    setVirtualListToBottom () {
+      if (this.$refs.vsl) {
+        this.$refs.vsl.scrollToBottom()
+      }
     }
   }
 }
@@ -75,4 +136,63 @@ export default {
     padding: 1em;
   }
 }
+.header {
+  padding: .5em;
+  .finished {
+    font-size: 14px;
+    text-align: center;
+  }
+  .spinner {
+    font-size: 10px;
+    margin: 0px auto;
+    text-indent: -9999em;
+    width: 15px;
+    height: 15px;
+    border-radius: 50%;
+    background: #ffffff;
+    background: linear-gradient(to right, #ccc 10%, rgba(255, 255, 255, 0) 42%);
+    position: relative;
+    animation: load3 1.4s infinite linear;
+    transform: translateZ(0);
+  }
+  .spinner:before {
+    width: 50%;
+    height: 50%;
+    background: #ccc;
+    border-radius: 100% 0 0 0;
+    position: absolute;
+    top: 0;
+    left: 0;
+    content: '';
+  }
+  .spinner:after {
+    background: #ffffff;
+    width: 75%;
+    height: 75%;
+    border-radius: 50%;
+    content: '';
+    margin: auto;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+  }
+  @-webkit-keyframes load3 {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes load3 {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+}
 </style>