Vonic - Scroll

Pull to refresh & infinite loading.

by Dahoo Wang

HTML

<link rel="stylesheet" href="https://unpkg.com/vonic/dist/ionic/css/ionic.css">
<script src="https://unpkg.com/[email protected]/dist/axios.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-router.min.js"></script>
<script src="https://unpkg.com/vonic/dist/vonic.min.js"></script>
<div id="app" class="page">
  <scroll class="page-content" style="margin-top: -44px;"
          :on-refresh="onRefresh"
          :on-infinite="onInfinite">
    <div v-for="(index, item) in items" @click="onItemClick(index, item)"
         class="item thin-border" :class="{'item-stable': index % 2 == 0}">
      {{ item }}
    </div>
  </scroll>
</div>

Babel + JSX

new Vue({
	el: '#app',
  components: {
  	'scroll': Vonic.Scroll
  },
  data () {
    return {
      items: []
    }
  },
  ready() {
    for (let i = 1; i <= 20; i++) {
      this.items.push(i + ' - keep walking, be 2 with you.')
    }
    this.top = 1
    this.bottom = 20
  },
  methods: {
  	onRefresh(done) {
      setTimeout(() => {
        let start = this.top - 1
        for (let i = start; i > start - 10; i--) {
          this.items.splice(0, 0, i + ' - keep walking, be 2 with you.')
        }
        this.top = this.top - 10;

        done()
      }, 1500)
    },

    onInfinite(done) {
      setTimeout(() => {
        let start = this.bottom + 1
        for (let i = start; i < start + 10; i++) {
          this.items.push(i + ' - keep walking, be 2 with you.')
        }
        this.bottom = this.bottom + 10;

        done()
      }, 1500)
    },

    onItemClick(index, item) {
      console.log(index)
    }
  }
})