<template>
  <div>
    <!--mescroll滾動區(qū)域的基本結(jié)構(gòu)-->
    <mescroll-vue ref="mescroll" :down="mescrollDown" :up="mescrollUp" @init="mescrollInit">
      <!--內(nèi)容...-->
    </mescroll-vue>
  </div>
</template>

<script>
// 引入mescroll的vue組件
import MescrollVue from 'mescroll.js/mescroll.vue'

export default {
  components: {
    MescrollVue // 注冊mescroll組件
  },
  data () {
    return {
      mescroll: null, // mescroll實(shí)例對象
      mescrollDown: {}, // 下拉刷新的配置. (如果下拉刷新和上拉加載處理的邏輯是一樣的,則mescrollDown可不用寫了)
      mescrollUp: { // 上拉加載的配置.
        callback: this.upCallback, // 上拉回調(diào),此處簡寫; 相當(dāng)于 callback: function(page, mescroll) { }
        page: {
          num: 0, // 當(dāng)前頁 默認(rèn)0,回調(diào)之前會加1; 即callback(page)會從1開始
          size: 10 // 每頁數(shù)據(jù)條數(shù),默認(rèn)10
        },
        htmlNodata: '<p class="upwarp-nodata">-- END --</p>',
        noMoreSize: 5, // 如果列表已無數(shù)據(jù),可設(shè)置列表的總數(shù)量要大于5才顯示無更多數(shù)據(jù);
        toTop: {
          // 回到頂部按鈕
          src: './static/mescroll/mescroll-totop.png', // 圖片路徑,默認(rèn)null,支持網(wǎng)絡(luò)圖
          offset: 1000 // 列表滾動1000px才顯示回到頂部按鈕
        },
        empty: {
          // 列表第一頁無任何數(shù)據(jù)時(shí),顯示的空提示布局; 需配置warpId才顯示
          warpId: 'xxid', // 父布局的id (1.3.5版本支持傳入dom元素)
          icon: './static/mescroll/mescroll-empty.png', // 圖標(biāo),默認(rèn)null,支持網(wǎng)絡(luò)圖
          tip: '暫無相關(guān)數(shù)據(jù)~' // 提示
        }
      },
      dataList: [] // 列表數(shù)據(jù)
    }
  },
  beforeRouteEnter (to, from, next) { // 如果沒有配置回到頂部按鈕或isBounce,則beforeRouteEnter不用寫
    next(vm => {
      // 找到當(dāng)前mescroll的ref,調(diào)用子組件mescroll-vue的beforeRouteEnter方法
      vm.$refs.mescroll && vm.$refs.mescroll.beforeRouteEnter() // 進(jìn)入路由時(shí),滾動到原來的列表位置,恢復(fù)回到頂部按鈕和isBounce的配置
    })
  },
  beforeRouteLeave (to, from, next) { // 如果沒有配置回到頂部按鈕或isBounce,則beforeRouteLeave不用寫
    // 找到當(dāng)前mescroll的ref,調(diào)用子組件mescroll-vue的beforeRouteLeave方法
    this.$refs.mescroll && this.$refs.mescroll.beforeRouteLeave() // 退出路由時(shí),記錄列表滾動的位置,隱藏回到頂部按鈕和isBounce的配置
    next()
  },
  methods: {
    // mescroll組件初始化的回調(diào),可獲取到mescroll對象
    mescrollInit (mescroll) {
      this.mescroll = mescroll // 如果this.mescroll對象沒有使用到,則mescrollInit可以不用配置
    },
    // 上拉回調(diào) page = {num:1, size:10}; num:當(dāng)前頁 ,默認(rèn)從1開始; size:每頁數(shù)據(jù)條數(shù),默認(rèn)10
    upCallback (page, mescroll) {
      // 聯(lián)網(wǎng)請求
      axios.get('xxxxxx', {
        params: {
          num: page.num, // 頁碼
          size: page.size // 每頁長度
        }
      }).then((response) => {
        // 請求的列表數(shù)據(jù)
        let arr = response.data
        // 如果是第一頁需手動制空列表
        if (page.num === 1) this.dataList = []
        // 把請求到的數(shù)據(jù)添加到列表
        this.dataList = this.dataList.concat(arr)
        // 數(shù)據(jù)渲染成功后,隱藏下拉刷新的狀態(tài)
        this.$nextTick(() => {
          mescroll.endSuccess(arr.length)
        })
      }).catch((e) => {
        // 聯(lián)網(wǎng)失敗的回調(diào),隱藏下拉刷新和上拉加載的狀態(tài);
        mescroll.endErr()
      })
    }
  }
}
</script>

<style scoped>
/*通過fixed固定mescroll的高度*/
.mescroll {
  position: fixed;
  top: 44px;
  bottom: 0;
  height: auto;
}
</style>