婚戀交友原始碼開發，移動端滾動載入更多元件的實現

前言

之前在溝通婚戀交友原始碼移動端需求的時候，有個功能點就是關於滾動載入，滾動到底部以後，自動執行下次請求。這樣不僅優化了婚戀交友原始碼的效能，還提升了使用者的操作體驗，是很值得實現的一項功能。

實現

配置

原理

監聽婚戀交友原始碼中的滾動，當滾動到使用者配置的 bottom 時，執行下次請求，當請求完畢，不執行請求。當請求失敗時，提示元件請求失敗，婚戀交友原始碼中增加提示失敗資訊。

程式碼

<template>
  <div
    id="loadMore"
   
  >
    <slot></slot>
    <div
     
      id="loadTips"
      v-if="totalCount > 0 && totalCount >= pageSize"
    >
      <i
        v-show="loadTips=='正在載入中'"
       
      ></i>
      {{loadTips}}
    </div>
  </div>
</template>
<script>
let timer = null // 不作為響應式變數，提升效能
export default {
    props: {
        pageIndex: {
            type: Number,
            default: 1
        },
        pageSize: {
            type: Number,
            default: 10
        },
        totalCount: {
            type: Number,
            default: 0
        },
        delay: {
            type: [Number],
            default: 500
        },
        // 滾動條到達底部多少就會自動請求資料
        bottom: {
            type: [Number],
            default: 25
        },
        // 請求失敗預防針，測試中發現的這個
        fail: {
            type: Boolean,
            default: false
        },
        failTips: {
            type: String,
            default: '請求失敗，稍候重試！'
        }
    },
    data () {
        return {
            loadTips: '正在載入中'
        };
    },
    watch: {
        pageIndex () {
            this.loadMore()
        },
        totalCount: {
            handler (val, oldval) {
                if (val > 0) {
                    this.loadMore()
                }
            },
            // 首次請求
            immediate: true
        },
        fail (value) {
            if (value) {
                this.loadTips = this.failTips
            }
        }
    },
    methods: {
        // 上滑動載入更多
        loadMore () {
            this.loadTips = '正在載入中';
            const {pageSize, pageIndex, totalCount} = this
            return new Promise((resolve, reject) => {
                window.onscroll = () => {
                    timer = setTimeout(() => {
                        if (!document.getElementById('loadTips')) return
                        const clientHeight = document.documentElement.clientHeight || document.body.clientHeight || 0
                        const rectBottom = document.getElementById('loadTips').getBoundingClientRect().bottom || 0
                        if (rectBottom < clientHeight + this.bottom) {
                            const size = totalCount - pageIndex * pageSize
                            if (size > 0) {
                                this.$emit('loadmore', pageIndex + 1)
                                resolve(true)
                            } else {
                                this.loadTips = '沒有更多資料了'
                                resolve(false)
                            }
                            clearTimeout(timer)
                        }
                    }, this.delay)
                }
            })
        }
    },
    beforeDestroy () {
        clearTimeout(timer)
    }
};
</script>
<style scoped>
.loadmore-tip {
  color: #aaa;
  font-size: 12px;
  text-align: center;
  height: 40px;
  line-height: 40px;
}
@keyframes rotate-loading {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate-loading {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.loadmore-icon {
  vertical-align: -2px;
  width: 12px;
  height: 12px;
  display: inline-block;
  background: url("data:image/png;base64,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")
    no-repeat;
  background-size: 12px 12px;
  -webkit-animation: rotate-loading 0.5s linear forwards infinite;
  animation: rotate-loading 0.5s linear forwards infinite;
}
</style>

以上就是“婚戀交友原始碼移動端實現滾動載入更多元件的方法”的全部內容，看起來是不是還挺簡單的，希望能對大家有幫助。

本文轉載自網路，轉載僅為分享乾貨知識，如有侵權歡迎聯絡雲豹科技進行刪除處理
原文連結：