vue mpvue 上拉加載更多示例代碼

vue 上拉加載更多示例代碼

能夠比較簡單的改成 mpvue , 去除滾動判斷，直接放在 onReachBottom 週期便可。

html

<div id="app">
  <div class="integralPage">
    <div class="itemList">
      <div class="itemBox" v-for="(item, index) in list" :key="index">
        <div class="info">
          <div class="title">{{item.title}}</div>
          <div class="time">{{item.time}}</div>
        </div>
        <div class="num">{{item.num}}</div>
      </div>
    </div>
    <div class="laodMore">
      <div v-show="logStatus === 0">
        <div>上拉加載</div>
      </div>
      <div v-show="logStatus === 1">
        <div>正在加載</div>
      </div>
      <div v-show="logStatus === 2">
        <div>沒有更多數據了</div>
      </div>
    </div>
  </div>
</div>

js

const obj = {
  el: '#app',
  data: {
    list: [],
    listParam: {
      page: 1,
    },
    noData: false,
    logStatus: 0,
  },
  created() {
    setTimeout(() => {
      this.list = [...new Array(20).keys()].map(item => ({ // 初始化數據
        title:  +new Date() + '簽到' + item,
        time: '2019/8/13 15:23:22',
        num: '+10',
      }))
      this.listParam.page += 1
    }, 500);
    window.addEventListener('scroll', this.onScroll)
  },
  methods: {
    onScroll() { // 若是是小程序, 不用監聽滾動事件, 也不用戶判斷高度, 由於小程序有觸底事件 onReachBottom , 直接在其中寫請求邏輯便可
      this.logStatus = 1
      let innerHeight = document.querySelector('#app').clientHeight // #app 是爲了獲取最外部 div 的高度
      let outerHeight = document.documentElement.clientHeight
      let scrollTop = document.documentElement.scrollTop
      console.log('onScroll', outerHeight, scrollTop, outerHeight + scrollTop, innerHeight)
      if (outerHeight + scrollTop === innerHeight) { // 能夠在這個地方給 innerHeight 添加適當的高度調整效果
        if (this.noData === true) {
          this.logStatus = 2
          return false
        }
        setTimeout(() => {
          const data = { // 請求回來的數據
            rows: [...new Array(10).keys()].map(item => ({
              title:  +new Date() + '簽到' + item,
              time: '2019/8/13 15:23:22',
              num: '+10',
            })),
            count: 40, // 服務器上總數
          }
          if (this.list.length < data.count) { // 本地總數是否大於服務器總數
            this.list = [...this.list, ...data.rows]
            this.listParam.page = this.listParam.page + 1
            this.logStatus = 0
          } else {
            this.logStatus = 2
            this.noData = true
          }
        }, 500);
      }
    }
  }
}
const $vue = new Vue(obj)

less

.integralPage {
  font-size: 14px;
  color: #101010;
  // 分類列表
  .itemList {
    border-top: 1px solid #bbb;
    margin-left: 12px;
    margin-right: 12px;
    .itemBox {
      margin-left: 16px;
      margin-right: 2px;
      border-bottom: 1px solid #E8E8E8;
      padding-top: 7px;
      padding-bottom: 7px;
      overflow: hidden;
      .info {
        float: left;
        max-width: 80%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        .time {
          font-size: 10px;
          color: #878686;
        }
      }
      .num {
        padding-top: 10px;
        padding-right: 10px;
        float: right;
      }
    }
  }
  // 上拉加載
  .laodMore {
    padding-top: 8px;
    padding-bottom: 8px;
    color: #ccc;
    text-align: center;
  }
}

mpvue

<template>
  <div class="integralPage">
    <div class="itemList">
      <div class="itemBox" v-for="(item, index) in list" :key="index">
        <div class="info">
          <div class="title">{{item.title}}</div>
          <div class="time">{{item.time}}</div>
        </div>
        <div class="num">{{item.num}}</div>
      </div>
    </div>
    <div class="laodMore">
      <div v-show="logStatus === 0">
        <div>上拉加載</div>
      </div>
      <div v-show="logStatus === 1">
        <div>正在加載</div>
      </div>
      <div v-show="logStatus === 2">
        <div>沒有更多數據了</div>
      </div>
    </div>
  </div>
</template>

<script> export default { data () { return { list: [], listParam: { page: 1, }, noData: false, logStatus: 0, } }, // 上拉加載，拉到底部觸發 onReachBottom() { this.onScroll() }, created() { setTimeout(() => { this.list = [...new Array(20).keys()].map(item => ({ // 初始化數據 title: +new Date() + '簽到' + item, time: '2019/8/13 15:23:22', num: '+10', })) this.listParam.page += 1 }, 500); }, methods: { onScroll() { // 若是是小程序, 不用監聽滾動事件, 也不用戶判斷高度, 由於小程序有觸底事件 onReachBottom , 直接在其中寫請求邏輯便可 this.logStatus = 1 // 能夠在這個地方給 innerHeight 添加適當的高度調整效果 if (this.noData === true) { this.logStatus = 2 return false } setTimeout(() => { const data = { // 請求回來的數據 rows: [...new Array(10).keys()].map(item => ({ title: +new Date() + '簽到' + item, time: '2019/8/13 15:23:22', num: '+10', })), count: 40, // 服務器上總數 } if (this.list.length < data.count) { // 本地總數是否大於服務器總數 this.list = [...this.list, ...data.rows] this.listParam.page = this.listParam.page + 1 this.logStatus = 0 } else { this.logStatus = 2 this.noData = true } }, 500); } } } </script>

<style lang="scss" scoped> .integralPage { font-size: 14px; color: #101010; // 分類列表 .itemList { border-top: 1px solid #bbb; margin-left: 12px; margin-right: 12px; .itemBox { margin-left: 16px; margin-right: 2px; border-bottom: 1px solid #E8E8E8; padding-top: 7px; padding-bottom: 7px; overflow: hidden; .info { float: left; max-width: 80%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; .time { font-size: 10px; color: #878686; } } .num { padding-top: 10px; padding-right: 10px; float: right; } } } // 上拉加載 .laodMore { padding-top: 8px; padding-bottom: 8px; color: #ccc; text-align: center; } } </style>

​