superstar-dice/_src/components/table/tab.vue

<template>
  <div class="rank-table" :class="{'td-underline': !isMoblie}">
    <div class="table-nav">
      <button :class="{'active': curTab == 0}" @click="curTab = 0">{{$t('table.live')}}</button>
      <button :class="{'active': curTab == 1}" @click="curTab = 1">{{$t('table.myBet')}}</button>
      <button :class="{'active': curTab == 2}" @click="curTab = 2">{{$t('table.hugeWin')}}</button>
    </div>
    <div class="game-table-border">
      <div class="game-table-bg">
        <live  @endloading="isLoadMore = false" :bot="liveBot" v-show="curTab == 0"></live>
        <mine  @endloading="isLoadMore = false" :bot="myBetBot" v-show="curTab == 1"></mine>
        <huge-prize  @endloading="isLoadMore = false" :bot="hugeWinBot" v-show="curTab == 2"></huge-prize>
        <div class="load-more" v-show="isLoadMore">{{$t('loading')}}</div>
      </div>
    </div>
  </div>
</template>
<script>
import live from './live'
import hugePrize from './hugePrize'
import mine from './mine'
import { debounce } from 'throttle-debounce'

export default {
  components: {
    live,
    hugePrize,
    mine
  },
  mounted () {
    window.addEventListener('scroll', this.handleScroll())
  },
  computed: {
    account () {
      return this.$store.account
    }
  },
  data () {
    return {
      tabList: [
        this.$t('table.live'),
        this.$t('table.myBet'),
        this.$t('table.hugeWin')
      ],
      curTab: 0,
      isMoblie: /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent),
      isLoadMore: false,
      liveBot: 1,
      myBetBot: 1,
      hugeWinBot: 1
    }
  },
  methods: {
    loadMore () {
      this.isLoadMore = true
      if (this.curTab === 0) {
        this.liveBot++
      } else if (this.curTab === 1) {
        this.myBetBot++
      } else if (this.curTab === 2) {
        this.hugeWinBot++
      }
    },
    handleScroll () {
      let beforeScrollTop = document.documentElement.scrollTop
      let self = this
      this.scrollFun = debounce(500, (e) => {
        var afterScrollTop = document.documentElement.scrollTop
        if (afterScrollTop - beforeScrollTop > 0) {
          var wScrollY = window.scrollY
          var wInnerH = window.innerHeight
          var bScrollH = document.body.scrollHeight
          if (wScrollY + wInnerH + 200 >= bScrollH) {
            if (self.isLoadMore === false) {
              self.loadMore()
            }
          }
        }
        beforeScrollTop = afterScrollTop
      })
      return this.scrollFun
    }
  }
}
</script>
<style lang="scss">
  @import './style.scss';
</style>