前言
在我們移動端還有一個很常用的組件，那就是滑動加載更多組件。平常我們看到的很多插件實現相當復雜就覺得這個組件很難，其實不是的！！這個組件其實可以很簡單的就實現出來，而且體驗也能非常的棒（當然我們沒有實現下拉刷新功能）！！下面我們就一起來實現這個組件。
效果展示
先上一個gif圖片展示我們做成后的效果，如下：
DOM結構
頁面應該包含三個部分：1. 正文區域 2.加載小菊花以及記載文字 3.所有數據加載完成后的文字：
<div ref="scroll" class="r-scroll"> <div class="r-scroll-wrap"> <slot></slot> </div> <slot name="loading"> <div v-show="isLoading" class="r-scroll-loading"> <r-loading></r-loading> <span class="r-scroll-loading-text">{{loadingText}}</span> </div> </slot> <slot name="complate"> <div v-show="isComplate" class="r-scroll-loading">{{complateText}}</div> </slot></div>css樣式
整個組件的容器r-scroll應該是固定寬度，超出部分可以滾動的；正文區域應該是隨著內容，高度自動增長的；加載小菊花在滾動距離底部默認數值的時候顯示；所有數據加載完成后顯示數據加載完成文字：
<style lang="scss">@mixin one-screen { position: absolute; left:0; top:0; width:100%; height:100%; overflow: hidden;}@mixin overflow-scroll { overflow: scroll; -webkit-overflow-scrolling: touch;}.r-scroll{ @include one-screen; @include overflow-scroll; &-loading{ text-align: center; padding-top: 3vw; padding-bottom: 3vw; font-size: 14px; color: #656565; line-height: 20px; &-text{ display: inline-block; vertical-align: middle; } }}</style>javascript
交互邏輯分析：
因為代碼不復雜，故不詳細解析，大家看下代碼注釋，如有不清楚的請在評論中發表評論：
<script>import rLoading from '../loading'export default{ components: {rLoading}, props: { // 距離底部數值，小于或等于該數值觸發自定義事件loadmore bottomDistance: { type: [Number, String], default: 70 }, // 加載中的文字 loadingText: { type: String, default: '加載中...' }, // 數據加載完成的文字 complateText: { type: String, default: '-- 我是個有底線的列表 --' } }, data () { return { // 用來判定數據是否加載完成 isComplate: false, // 用來判定是否正在加載數據 isLoading: false, // 組件容器 scroll: null, // 正文容器 scrollWrap: null } }, watch: { // 監聽isLoading，如果isLoading的值為true則代表觸發了loadmore事件 isLoading (val) { if (val) { this.$emit('loadmore') } } }, methods: { // 初始化組件，獲取組件容器、正文容器節點，并給組件容器節點綁定滾動事件 init () { this.scroll = this.$refs.scroll this.scrollWrap = this.scroll.childNodes[0] this.scroll.addEventListener('scroll', this.scrollEvent) this.$emit('init', this.scroll) }, scrollEvent (e) { // 如果數據全部加載完成了，則再也不觸發loadmore事件 if (this.isComplate) return let scrollTop = this.scroll.scrollTop let scrollH = this.scroll.offsetHeight let scrollWrapH = this.scrollWrap.offsetHeight // 組件容器滾的距離 + 組件容器本身距離大于或者等于正文容器高度 - 指定數值 則觸發loadmore事件 if (scrollTop + scrollH >= scrollWrapH - this.bottomDistance) { this.isLoading = true } }, // 當前數據加載完成后調用該函數 loaded () { this.isLoading = false }, // 所有數據加載完成后調用該函數 compleate () { this.isLoading = false this.isComplate = true this.scroll.removeEventListener('scroll', this.scrollEvent) } }, mounted () { this.$nextTick(this.init) }}</script>另外該組件中引用到了loading小菊花組件，附錄一個小菊花組件代碼，因代碼簡單故不詳細解析：
菊花使用的是一張gif圖片，請照一張你喜歡的菊花gif放在該菊花組件的路徑下
<template> <div class="r-loading-container"> <img src="./loading.gif"> </div></template><script>export default {}</script><style lang="scss">.r-loading-container{ display: inline-block; vertical-align: middle; img{ width: 20px; height: 20px; display: block; }}</style>寫在最后
最后這里附錄一個使用例子吧：
<template> <div class="index"> <r-scroll ref="scroll" @loadmore="queryDate"> <div class="item" v-for="(item, index) in list">{{item}}</div> </r-scroll> </div></template><script>import rScroll from '../../components/scroll'function timeout (ms) { return new Promise((resolve, reject) => { setTimeout(resolve, ms, 'done') })}export default{ components: {rScroll}, data () { return { i: 0, list: [] } }, methods: { async queryDate () { await timeout(1000) let i = this.i let data = [] for (let j = 0; j < 40; j++) { data.push(i + j) this.i = this.i + 1 } this.list = this.list.concat(data) // 調用組件中的loaded函數，如果數據加載完成后記得調用組件的compleate函數 this.$refs.scroll.loaded() } }, mounted () { this.queryDate() }}</script><style lang="scss">.item{ background-color: #f2f2f2; border-bottom: 1px solid #fff; height: 40px; line-height: 40px; text-align: center;}</style>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
