# infinity

The infinity plugin provides BetterScroll with unlimited scrolling capabilities. If you have a large amount of list data to render, you can use the infinity plugin, in which BetterScroll will only render a certain number of DOM elements, so that the page will continue to scroll smoothly when a large amount of data.

Note: Unless you have a lot of data rendering needs, use coreScroll.

# Install

npm install @better-scroll/infinity --save

// or

yarn add @better-scroll/infinity

# Usage

First, install the plugin via the static method BScroll.use()

import BScroll from '@better-scroll/core'
import InfinityScroll from '@better-scroll/infinity'

BScroll.use(InfinityScroll)

Then, To instantiate BetterScroll, you need to pass the related configuration item infinity:

new BScroll('.bs-wrapper', {
  scrollY: true,
  infinity: {
    fetch(count) {
      // Fetch data that is larger than count, the function is asynchronous, and it needs to return a Promise.。
      // After you have successfully fetch the data, you need resolve an array of data (or resolve Promise).
      // Each element of the array is list data, which will be rendered when the render method executes。
      // If there is no data, you can resolve (false) to tell the infinite scroll list that there is no more data。
    }
    render(item, div?: HTMLElement) {
      // Rendering each element node, item is data from fetch function
      // div is an element which is recycled from document or undefined
      // The function needs to return to a html element.
    },
    createTombstone() {
      // Must return a tombstone DOM node.
    }
  }
})

Note

fetch, render, createTombstone must be implemented in accordance with the comments as above, otherwise an internal error will be reported.

The plugin relies on Promise internally. If the browser does not support it, the Promise Polyfill is required.

# Demo

<template>
  <div class="infinity">
    <div class="template">
      <li ref="message" class="infinity-item">
        <img class="infinity-avatar" width="48" height="48">
        <div class="infinity-bubble">
          <p></p>
          <img width="300" height="300">
          <div class="infinity-meta">
            <time class="infinity-posted-date"></time>
          </div>
        </div>
      </li>
      <li ref="tombstone" class="infinity-item tombstone">
        <img class="infinity-avatar" width="48" height="48" :src="require('./image/unknown.jpg')">
        <div class="infinity-bubble">
          <p></p>
          <p></p>
          <p></p>
          <div class="infinity-meta">
            <time class="infinity-posted-date"></time>
          </div>
        </div>
      </li>
    </div>
    <div ref="chat" class="infinity-timeline">
      <ul>
      </ul>
    </div>
  </div>
</template>

<script>
  import BScroll from '@better-scroll/core'
  import InfinityScroll from '@better-scroll/infinity'
  import message from './data/message.json'

  BScroll.use(InfinityScroll)

  const NUM_AVATARS = 4
  const NUM_IMAGES = 77
  const INIT_TIME = new Date().getTime()

  function getItem(id) {
    function pickRandom(a) {
      return a[Math.floor(Math.random() * a.length)]
    }

    return new Promise(function (resolve) {
      let item = {
        id: id,
        avatar: Math.floor(Math.random() * NUM_AVATARS),
        self: Math.random() < 0.1,
        image: Math.random() < 1.0 / 20 ? Math.floor(Math.random() * NUM_IMAGES) : '',
        time: new Date(Math.floor(INIT_TIME + id * 20 * 1000 + Math.random() * 20 * 1000)),
        message: pickRandom(message)
      }
      if (item.image === '') {
        resolve(item)
      } else {
        let image = new Image()
        image.src = require(`./image/image${item.image}.jpg`)
        image.addEventListener('load', function () {
          item.image = image
          resolve(item)
        })
        image.addEventListener('error', function () {
          item.image = ''
          resolve(item)
        })
      }
    })
  }

  export default {
    name: 'infinity',
    created() {
      this.nextItem = 0
      this.pageNum = 0
    },
    mounted() {
      this.createInfinityScroll()
    },
    methods: {
      createInfinityScroll() {
        this.scroll = new BScroll(this.$refs.chat, {
          infinity: {
            render: (item, div) => {
              div = div || this.$refs.message.cloneNode(true)
              div.dataset.id = item.id
              div.querySelector('.infinity-avatar').src = require(`./image/avatar${item.avatar}.jpg`)
              div.querySelector('.infinity-bubble p').textContent = item.id + '  ' + item.message
              div.querySelector('.infinity-bubble .infinity-posted-date').textContent = item.time.toString()

              let img = div.querySelector('.infinity-bubble img')
              if (item.image !== '') {
                img.style.display = ''
                img.src = item.image.src
                img.width = item.image.width
                img.height = item.image.height
              } else {
                img.src = ''
                img.style.display = 'none'
              }

              if (item.self) {
                div.classList.add('infinity-from-me')
              } else {
                div.classList.remove('infinity-from-me')
              }
              return div
            },
            createTombstone: () => {
              return this.$refs.tombstone.cloneNode(true)
            },
            fetch: (count) => {
              // Fetch at least 30 or count more objects for display.
              count = Math.max(30, count)
              return new Promise((resolve, reject) => {
                // Assume 50 ms per item.
                setTimeout(() => {
                  if (++this.pageNum > 20) {
                    resolve(false)
                  } else {
                    console.log('pageNum', this.pageNum)
                    let items = []
                    for (let i = 0; i < Math.abs(count); i++) {
                      items[i] = getItem(this.nextItem++)
                    }
                    resolve(Promise.all(items))
                  }
                }, 500)
              })
            }
          }
        })
        this.scroll.on('scroll', () => {
          console.log('is scrolling')
        })
        this.scroll.on('scrollEnd', () => {
          console.log('scrollEnd')
        })
      }
    }
  }
</script>

← nested-scroll movable →