From 8a0e3d5c1f644862273c5f2bcc47f4d230fda048 Mon Sep 17 00:00:00 2001
From: yiqian <yiqian@imdada.cn>
Date: Mon, 28 Sep 2020 14:26:06 +0800
Subject: [PATCH 1/4] =?UTF-8?q?=E4=BF=AE=E5=A4=8Dloadmore=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E9=80=82=E9=85=8D=E5=AE=89=E5=8D=93bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/scripts/components/Loadmore.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/scripts/components/Loadmore.vue b/src/scripts/components/Loadmore.vue
index 22fe4e1..67fcabc 100644
--- a/src/scripts/components/Loadmore.vue
+++ b/src/scripts/components/Loadmore.vue
@@ -275,8 +275,8 @@
             isBottomReached() {
                 if(this.scrollElement === window) {
                     return (
-                        document.documentElement.clientHeight + (document.body.scrollTop || window.pageYOffset)
-                        === document.body.scrollHeight
+                        document.documentElement.clientHeight + (document.body.scrollTop || document.documentElement.scrollTop)
+                            >= document.body.scrollHeight
                     );
                 }
 

From 7550c55dfb3f869f2527c3c51b81442a25819a1e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=86=8A=E8=93=89=E8=93=89?= <xiongrongrong@imdada.cn>
Date: Wed, 2 Dec 2020 17:35:15 +0800
Subject: [PATCH 2/4] add loadmore demo

---
 src/scripts/components/Loadmore.vue |  7 ++-
 src/scripts/routes.json             | 10 ++++
 src/scripts/views/loadMore.vue      | 75 +++++++++++++++++++++++++++++
 3 files changed, 91 insertions(+), 1 deletion(-)
 create mode 100644 src/scripts/views/loadMore.vue

diff --git a/src/scripts/components/Loadmore.vue b/src/scripts/components/Loadmore.vue
index 22fe4e1..3b6b25b 100644
--- a/src/scripts/components/Loadmore.vue
+++ b/src/scripts/components/Loadmore.vue
@@ -274,15 +274,20 @@
             },
             isBottomReached() {
                 if(this.scrollElement === window) {
+                    // alert('window')
+                    // alert(`document.documentElement.clientHeight=${document.documentElement.clientHeight}---document.body.scrollTop=${document.body.scrollTop}---window.pageYOffset=${window.pageYOffset}---document.body.scrollHeight${document.body.scrollHeight}`)
                     return (
                         document.documentElement.clientHeight + (document.body.scrollTop || window.pageYOffset)
                         === document.body.scrollHeight
                     );
                 }
 
+                // alert('!window')
+                // alert(`this.scrollElement.getBoundingClientRect().bottom=${this.scrollElement.getBoundingClientRect().bottom}---this.$el.getBoundingClientRect().bottom=${this.$el.getBoundingClientRect().bottom}`)
+
                 return (
                     this.scrollElement.getBoundingClientRect().bottom
-                    >= this.$el.getBoundingClientRect().bottom
+                    >= parseInt(this.$el.getBoundingClientRect().bottom)
                 );
             },
             onTopLoaded() {
diff --git a/src/scripts/routes.json b/src/scripts/routes.json
index 75014d2..7c62353 100644
--- a/src/scripts/routes.json
+++ b/src/scripts/routes.json
@@ -214,5 +214,15 @@
                 "icon": "th-large"
             }
         ]
+    },
+    {
+        "title": "分页加载",
+        "children": [
+            {
+                "path": "/loadMore",
+                "name": "Load More",
+                "icon": "th-large"
+            }
+        ]
     }
 ]
diff --git a/src/scripts/views/loadMore.vue b/src/scripts/views/loadMore.vue
new file mode 100644
index 0000000..6159940
--- /dev/null
+++ b/src/scripts/views/loadMore.vue
@@ -0,0 +1,75 @@
+<template>
+    <div>
+        <loadmore
+            v-if="list.length"
+            ref="loadmore"
+            :bottom-method="getList"
+            :bottom-all-loaded="allLoaded"
+            bottom-loading-text="加载中..."
+            bottom-pull-text="上拉加载更多"
+            bottom-drop-text="上拉加载更多"
+        >
+            <div
+            v-for="(item, index) in list"
+            :key="index"
+            class="item"
+            >
+            {{item.text}}
+            </div>
+        </loadmore>
+        <div v-if="allLoaded" class="no-more">没有更多记录了哦</div>
+    </div>
+</template>
+<script>
+    const list = [{
+        text: '已加载内容1'
+    },{
+        text: '已加载内容2'
+    },{
+        text: '已加载内容3'
+    },{
+        text: '已加载内容4'
+    },{
+        text: '已加载内容5'
+    },{
+        text: '已加载内容6'
+    },{
+        text: '已加载内容7'
+    },{
+        text: '已加载内容8'
+    },{
+        text: '已加载内容9'
+    },{
+        text: '已加载内容10'
+    }]
+
+    export default{
+        data() {
+            return {
+                list: [],
+                allLoaded: false
+            }
+        },
+        created() {
+            this.getList()
+        },
+        methods: {
+            getList() {
+                if (this.list.length > 100) {
+                    this.allLoaded = true
+                    return
+                }
+                this.list = [...this.list, ...list]
+            },
+        },
+    };
+</script>
+<style>
+    .item {
+        font-size: 1.6em;
+        width: 100%;
+        height: 20em;
+        line-height: 5em;
+        text-align: center;
+    }
+</style>
\ No newline at end of file

From fafb90cd7be43d7563bbf36d15fafaa921441d12 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=86=8A=E8=93=89=E8=93=89?= <xiongrongrong@imdada.cn>
Date: Thu, 4 Feb 2021 20:38:59 +0800
Subject: [PATCH 3/4] =?UTF-8?q?=E5=8A=A0=E8=BD=BD=E6=9B=B4=E5=A4=9A?=
 =?UTF-8?q?=E5=88=9D=E6=AD=A5=E5=BD=A2=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/scripts/components/Loading.vue  |   2 +-
 src/scripts/components/Loadmore.vue | 223 +++++++++++++++++++---------
 src/scripts/views/loadMore.vue      |  45 ++++--
 src/styles/modules/loading.scss     |   4 +
 src/styles/modules/loadmore.scss    |  26 +++-
 src/styles/variables.scss           |   1 +
 6 files changed, 213 insertions(+), 88 deletions(-)

diff --git a/src/scripts/components/Loading.vue b/src/scripts/components/Loading.vue
index 770a5da..11aab86 100644
--- a/src/scripts/components/Loading.vue
+++ b/src/scripts/components/Loading.vue
@@ -17,7 +17,7 @@
             size: {
                 type: String,
                 validator(value) {
-                    return ['sm', 'lg'].indexOf(value) > -1;
+                    return ['sm', 'md', 'lg'].indexOf(value) > -1;
                 },
             },
             theme: {
diff --git a/src/scripts/components/Loadmore.vue b/src/scripts/components/Loadmore.vue
index bdd404f..b371ce7 100644
--- a/src/scripts/components/Loadmore.vue
+++ b/src/scripts/components/Loadmore.vue
@@ -1,20 +1,21 @@
 <template>
-    <div class="loadmore">
+    <!-- 滚动模块 固定为node-loadmore -->
+    <div class="loadmore" style="overflow-y: auto;height:100%;">
         <div
             class="loadmore-content"
             :class="{ dropped: topDropped || bottomDropped }"
-            :style="{ transform: `translate3d(0, ${translate}px, 0)` }">
+            :style="{ transform: `translate3d(0, ${translate < maxTranslate ? translate : maxTranslate}px, 0)` }">
             <slot name="top">
-                <div class="loadmore-hint loadmore-hint-top" v-if="topMethod">
-                    <loading v-if="showLoading && topStatus === 'loading'"></loading>
-                    <span class="loadmore-text">{{ topText }}</span>
+                <div class="loadmore-hint loadmore-hint-top" :style="{ height: `${ translate < maxTranslate ? translate : maxTranslate }px` }" v-if="topMethod">
+                    <loading size="md" v-if="showLoading" />
+                    <span class="loadmore-text">{{ (showLoading && topLoadingText) || topText }}</span>
                 </div>
             </slot>
             <slot></slot>
             <slot name="bottom">
-                <div class="loadmore-hint loadmore-hint-bottom" v-if="bottomMethod">
-                    <loading v-if="showLoading && bottomStatus === 'loading'" ></loading>
-                    <span class="loadmore-text">{{ bottomText }}</span>
+                <div class="loadmore-hint loadmore-hint-bottom" v-if="bottomMethod && direction === 'up' && !bottomAllLoaded">
+                    <loading size="md" v-if="showLoading" />
+                    <span class="loadmore-text">{{ showLoading && bottomLoadingText || bottomText }}</span>
                 </div>
             </slot>
         </div>
@@ -27,7 +28,7 @@
         props: {
             topPullText: {
                 type: String,
-                default: 'pull down to refresh',
+                default: '',
             },
             topDropText: {
                 type: String,
@@ -56,11 +57,11 @@
             },
             bottomPullText: {
                 type: String,
-                default: 'pull up to refresh',
+                default: '',
             },
             bottomDropText: {
                 type: String,
-                default: 'release to load more',
+                default: '',
             },
             bottomLoadingText: {
                 type: String,
@@ -70,6 +71,10 @@
                 type: Number,
                 default: 70,
             },
+            bottomOffset: {
+                type: Number,
+                default: 0,
+            },
             bottomMethod: {
                 type: Function,
             },
@@ -81,6 +86,14 @@
                 type: Boolean,
                 default: false,
             },
+            autoLoading: {
+                type: Boolean,
+                default: true,
+            },
+            maxTranslate: { // 下拉刷新 最大回弹距离
+                type: Number,
+                default: 100,
+            }
         },
         data() {
             return {
@@ -88,7 +101,7 @@
                 topText: '',
                 topDropped: false,
                 topPulled: false,
-                bottomStatus: '',
+                bottomStatus: 'init',
                 bottomText: '',
                 bottomDropped: false,
                 bottomReached: false,
@@ -98,10 +111,13 @@
                 currentY: 0,
                 direction: '',
                 translate: 0,
+                previousScrollY: 0,
+                downRefreshElement: null,
             };
         },
         watch: {
             topStatus(status) {
+                console.log('topstatus', status)
                 switch(status) {
                     case 'pull':
                         this.topText = this.topPullText;
@@ -109,6 +125,7 @@
                     case 'drop':
                         this.topText = this.topDropText;
                         break;
+                    case 'init':
                     case 'loading':
                         this.topText = this.topLoadingText;
                         break;
@@ -125,6 +142,7 @@
                     case 'drop':
                         this.bottomText = this.bottomDropText;
                         break;
+                    case 'init':
                     case 'loading':
                         this.bottomText = this.bottomLoadingText;
                         break;
@@ -135,6 +153,23 @@
             },
         },
         methods: {
+            // 初始化上拉加载
+            async initUpContent() {
+                // todo
+                // loadFull: {
+                //     use: false, // 列表数据过少,不足以滑动触发上拉加载,是否自动加载下一页,直到满屏或者无更多数据为止;默认false,因为可通过调高page.size避免这个情况
+                //     delay: 500 // 延时执行的毫秒数; 延时是为了保证列表数据或占位的图片都已初始化完成,且下拉刷新上拉加载中区域动画已执行完毕;
+                // },
+                await this.bottomMethod()
+                this.bottomText = this.bottomLoadingText;
+                this.bottomStatus = 'pull';
+            },
+            // 初始化下拉刷新
+            async initDownContent() {
+                await this.handlePullDownRefresh()
+                this.topText = this.topLoadingText;
+                this.topStatus = 'pull';
+            },
             getScrollElement(element) {
                 let currentNode = element,
                     overflowY = '';
@@ -153,12 +188,45 @@
                 return window;
             },
             getScrollTop(element) {
-                if(element === window) {
-                    return Math.max(window.pageYOffset || 0, document.documentElement.scrollTop);
-                }
+                // if(element === window) {
+                //     return Math.max(window.pageYOffset || 0, document.documentElement.scrollTop);
+                // }
 
                 return element.scrollTop;
             },
+            // 下拉刷新
+            async handlePullDownRefresh() {
+                this.translate = 50;
+                this.topStatus = 'loading';
+                await this.topMethod()
+                this.topStatus = 'pull';
+            },
+            async handleScroll(event) {
+                console.log('111wwwwwwwwwwwwww')
+                this.direction = (this.getScrollTop(this.scrollElement) - this.previousScrollY > 0) ? 'up' : 'down'
+
+                // pull up
+                if(this.direction === 'up') {
+                    this.bottomReached = this.bottomReached || this.isBottomReached();
+                }
+
+                if(
+                    typeof this.bottomMethod === 'function' &&
+                    this.bottomStatus !== 'loading' && this.bottomStatus !== 'init' &&
+                    this.direction === 'up' &&
+                    this.bottomReached &&
+                    !this.bottomAllLoaded
+                ) {
+                    event.stopPropagation();
+                    console.log('wwwwwwwwwwwwww')
+                    this.bottomStatus = 'loading';
+                    await this.bottomMethod()
+                    this.bottomStatus = 'pull';
+                    this.bottomReached = false;
+                }
+
+                // pull down
+            },
             handleTouchStart(event) {
                 this.startY = event.touches[0].clientY;
                 this.startScrollTop = this.getScrollTop(this.scrollElement);
@@ -170,7 +238,7 @@
                     this.topPulled = false;
                 }
 
-                if(this.bottomStatus !== 'loading') {
+                if(this.bottomStatus !== 'loading' && this.bottomStatus !== 'init') {
                     this.bottomStatus = 'pull';
                     this.bottomDropped = false;
                 }
@@ -198,7 +266,7 @@
                     this.getScrollTop(this.scrollElement) === 0 &&
                     !this.topAllLoaded
                 ) {
-                    event.preventDefault();
+                    // event.preventDefault();
                     event.stopPropagation();
                     this.translate = distance - this.startScrollTop;
                     if(this.translate < 0) this.translate = 0;
@@ -210,39 +278,45 @@
                 }
 
                 // pull up
-                if(this.direction === 'up') {
-                    this.bottomReached = this.bottomReached || this.isBottomReached();
-                }
+                // if(this.direction === 'up') {
+                //     this.bottomReached = this.bottomReached || this.isBottomReached();
+                // }
 
-                if(
-                    typeof this.bottomMethod === 'function' &&
-                    this.bottomStatus !== 'loading' &&
-                    this.direction === 'up' &&
-                    this.bottomReached &&
-                    !this.bottomAllLoaded
-                ) {
-                    event.preventDefault();
-                    event.stopPropagation();
-                    this.translate = this.getScrollTop(this.scrollElement)
-                        - this.startScrollTop
-                        + distance;
-                    if(this.translate > 0) this.translate = 0;
-                    this.bottomStatus = -this.translate >= this.bottomDistance ? 'drop' : 'pull';
-                }
+                // if(
+                //     typeof this.bottomMethod === 'function' &&
+                //     this.bottomStatus !== 'loading' && this.bottomStatus !== 'init' &&
+                //     this.direction === 'up' &&
+                //     this.bottomReached &&
+                //     !this.bottomAllLoaded
+                // ) {
+                //     // event.preventDefault();
+                //     event.stopPropagation();
+                //     // this.translate = this.getScrollTop(this.scrollElement)
+                //     //     - this.startScrollTop
+                //     //     + distance;
+                //     // if(this.translate > 0) this.translate = 0;
+                //     // this.bottomStatus = -this.translate >= this.bottomDistance ? 'drop' : 'pull';
+                //     // this.bottomMethod()
+                // }
             },
-            handleTouchEnd() {
+            async handleTouchEnd() {
                 // pull down
                 if(this.direction === 'down' &&
                     this.getScrollTop(this.scrollElement) === 0 &&
                     this.translate > 0
                 ) {
+                    console.log('cccccccccccccccc1111')
                     this.topDropped = true;
 
                     if(this.topStatus === 'drop') {
+                        console.log('cccccccccccccccc11112222')
                         this.translate = 50;
-                        this.topStatus = 'loading';
-                        this.topMethod();
+                        // this.topStatus = 'loading';
+                        // this.topMethod();
+                        await this.handlePullDownRefresh()
+                        this.translate = 0;
                     } else {
+                        console.log('cccccccccccccccc11112222333')
                         this.translate = 0;
                         this.topStatus = 'pull';
                         this.topCancelledMethod && this.topCancelledMethod();
@@ -252,43 +326,36 @@
                 // pull up
                 if(
                     this.direction === 'up' &&
-                    this.bottomReached &&
-                    this.translate < 0
+                    this.bottomReached
                 ) {
-                    this.bottomDropped = true;
-                    // reset after pull up takes effect
-                    this.bottomReached = false;
+                    // this.bottomDropped = true;
+                    // // reset after pull up takes effect
+                    // this.bottomReached = false;
 
-                    if(this.bottomStatus === 'drop') {
-                        this.translate = -50;
-                        this.bottomStatus = 'loading';
-                        this.bottomMethod();
-                    } else {
-                        this.translate = 0;
-                        this.bottomStatus = 'pull';
-                    }
+                    // if(this.bottomStatus === 'drop') {
+                    //     this.translate = -50;
+                    //     this.bottomStatus = 'loading';
+                    //     this.bottomMethod();
+                    // } else {
+                    //     this.translate = 0;
+                    //     this.bottomStatus = 'pull';
+                    // }
+
+                    this.bottomStatus = 'loading';
+                    this.bottomReached = false;
+                    // this.bottomMethod();
                 }
 
                 // reset direction
                 this.direction = '';
             },
             isBottomReached() {
-                if(this.scrollElement === window) {
-                    // alert('window')
-                    // alert(`document.documentElement.clientHeight=${document.documentElement.clientHeight}---document.body.scrollTop=${document.body.scrollTop}---window.pageYOffset=${window.pageYOffset}---document.body.scrollHeight${document.body.scrollHeight}`)
-                    return (
-                        document.documentElement.clientHeight + (document.body.scrollTop || document.documentElement.scrollTop)
-                            >= document.body.scrollHeight
-                    );
-                }
-
-                // alert('!window')
-                // alert(`this.scrollElement.getBoundingClientRect().bottom=${this.scrollElement.getBoundingClientRect().bottom}---this.$el.getBoundingClientRect().bottom=${this.$el.getBoundingClientRect().bottom}`)
+                // const toBottom = parseInt(this.$el.scrollHeight - this.$el.clientHeight - this.$el.scrollTop);
+                // console.log(this.$el.scrollHeight, this.$el.clientHeight, this.$el.scrollTop)
 
-                return (
-                    this.scrollElement.getBoundingClientRect().bottom
-                    >= parseInt(this.$el.getBoundingClientRect().bottom)
-                );
+                const toBottom = parseInt(this.scrollElement.scrollHeight - this.scrollElement.clientHeight - this.scrollElement.scrollTop);
+                console.log(this.scrollElement.scrollHeight, this.scrollElement.clientHeight, this.scrollElement.scrollTop, toBottom, toBottom <= this.bottomOffset)
+                return toBottom <= this.bottomOffset;
             },
             onTopLoaded() {
                 this.translate = 0;
@@ -300,20 +367,29 @@
                 this.bottomStatus = 'pull';
                 this.bottomDropped = false;
                 this.$nextTick(() => {
-                    if(this.scrollElement === window) {
-                        document.body.scrollTop += 50;
-                    } else {
+                    // if(this.scrollElement === window) {
+                    //     document.body.scrollTop += 50;
+                    // } else {
                         this.scrollElement.scrollTop += 50;
-                    }
+                    // }
                     this.translate = 0;
                 });
             },
         },
+        created() {
+            if (this.topMethod && this.bottomMethod) {
+                console.log('000000')
+                this.initUpContent()
+                return
+            }
+            this.topMethod && this.initDownContent()
+            this.bottomMethod && this.initUpContent()
+        },
         mounted() {
-            this.topText = this.topPullText;
-            this.topStatus = 'pull';
-            this.bottomStatus = 'pull';
             this.scrollElement = this.getScrollElement(this.$el);
+            // this.scrollElement = this.$el
+
+            console.log(this.scrollElement)
 
             if(
                 typeof this.topMethod === 'function' ||
@@ -322,6 +398,7 @@
                 this.$el.addEventListener('touchstart', this.handleTouchStart);
                 this.$el.addEventListener('touchmove', this.handleTouchMove);
                 this.$el.addEventListener('touchend', this.handleTouchEnd);
+                this.$el.addEventListener('scroll', this.handleScroll)
             }
         },
         beforeDestroy() {
diff --git a/src/scripts/views/loadMore.vue b/src/scripts/views/loadMore.vue
index 6159940..4b35a28 100644
--- a/src/scripts/views/loadMore.vue
+++ b/src/scripts/views/loadMore.vue
@@ -1,13 +1,14 @@
 <template>
-    <div>
+    <div style="overflow-y: auto;height:100%;">
         <loadmore
-            v-if="list.length"
             ref="loadmore"
+            :top-method="getList"
             :bottom-method="getList"
             :bottom-all-loaded="allLoaded"
+            :showLoading="showLoading"
             bottom-loading-text="加载中..."
-            bottom-pull-text="上拉加载更多"
-            bottom-drop-text="上拉加载更多"
+            top-loading-text="加载中..."
+            top-drop-text="释放刷新"
         >
             <div
             v-for="(item, index) in list"
@@ -39,28 +40,47 @@
         text: '已加载内容8'
     },{
         text: '已加载内容9'
-    },{
-        text: '已加载内容10'
     }]
 
     export default{
         data() {
             return {
                 list: [],
-                allLoaded: false
+                allLoaded: false,
+                showLoading: true,
+                count: 0,
             }
         },
         created() {
-            this.getList()
+            // this.getList()
         },
         methods: {
-            getList() {
+            async getList() {
                 if (this.list.length > 100) {
                     this.allLoaded = true
                     return
                 }
+                console.log(++this.count)
+
+                this.showLoading = true
+                const list = await this.getListApi()
+                this.showLoading = false
                 this.list = [...this.list, ...list]
             },
+            getListApi() {
+                return new Promise((resolve, reject)=>{
+                    //延时一秒,模拟联网
+                    setTimeout(function() {
+                        try {
+                            //模拟接口请求成功
+                            resolve(list);
+                        } catch (e) {
+                            //模拟接口请求失败
+                            reject(e);
+                        }
+                    }, 1000)
+                })
+            }
         },
     };
 </script>
@@ -68,8 +88,11 @@
     .item {
         font-size: 1.6em;
         width: 100%;
-        height: 20em;
-        line-height: 5em;
+        height: 3em;
+        line-height: 3em;
+        text-align: center;
+    }
+    .no-more {
         text-align: center;
     }
 </style>
\ No newline at end of file
diff --git a/src/styles/modules/loading.scss b/src/styles/modules/loading.scss
index 8c7d8f6..d732cf7 100644
--- a/src/styles/modules/loading.scss
+++ b/src/styles/modules/loading.scss
@@ -28,6 +28,10 @@
     width: $loading-width-sm;
 }
 
+.loading-md {
+    width: $loading-width-md;
+}
+
 
 
 @keyframes rotate {
diff --git a/src/styles/modules/loadmore.scss b/src/styles/modules/loadmore.scss
index d3d2fd7..00d01b3 100644
--- a/src/styles/modules/loadmore.scss
+++ b/src/styles/modules/loadmore.scss
@@ -17,15 +17,35 @@
         vertical-align: middle;
     }
 }
-
+// 下拉刷新
 .loadmore-hint-top {
-    margin-top: $loadmore-hint-margin;
+    height: 0;
+}
+.loadmore-hint-top-reset {
+    -webkit-transition: height 300ms;
+    transition: height 300ms;
 }
 
+// 上拉加载
 .loadmore-hint-bottom {
-    margin-bottom: $loadmore-hint-margin;
+
 }
 
+// .loadmore-hint-top {
+//     margin-top: $loadmore-hint-margin;
+// }
+
+// .loadmore-hint-bottom {
+//     margin-bottom: $loadmore-hint-margin;
+// }
+
 .loadmore-text {
     vertical-align: middle;
 }
+
+.hard-ware {
+    webkit-transform: translateZ(0);
+    -webkit-transform-style: preserve-3d;
+    -webkit-backface-visibility: hidden;
+    -webkit-perspective: 1000;
+}
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index c0f025c..254f4f8 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -440,6 +440,7 @@ $loading-path-stroke-primary: $brand-primary !default;
 $loading-path-stroke-secondary: $brand-secondary !default;
 
 $loading-width-sm: 1rem !default;
+$loading-width-md: 2rem !default;
 
 // Picker
 $picker-bg-color: $brand-pure !default;

From 079466223d09379cad64330f2192baf92fc71809 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=86=8A=E8=93=89=E8=93=89?= <xiongrongrong@imdada.cn>
Date: Sun, 7 Feb 2021 15:22:42 +0800
Subject: [PATCH 4/4] =?UTF-8?q?loadmore--=E5=85=BC=E5=AE=B9=E8=80=81?=
 =?UTF-8?q?=E7=89=88=E6=9C=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/scripts/components/Loadmore.vue | 54 ++++++++++++++++++++++-------
 src/styles/modules/loadmore.scss    |  6 ++--
 2 files changed, 44 insertions(+), 16 deletions(-)

diff --git a/src/scripts/components/Loadmore.vue b/src/scripts/components/Loadmore.vue
index b371ce7..7ab28cb 100644
--- a/src/scripts/components/Loadmore.vue
+++ b/src/scripts/components/Loadmore.vue
@@ -1,6 +1,7 @@
 <template>
+    <!-- 注意：当loadmore组件的父元素 未设置高度时 loadmore组件的clientHeight是整个内容的高度 而非可视区高度 -->
     <!-- 滚动模块 固定为node-loadmore -->
-    <div class="loadmore" style="overflow-y: auto;height:100%;">
+    <div class="loadmore" style="overflow-y: scroll;height:100%;">
         <div
             class="loadmore-content"
             :class="{ dropped: topDropped || bottomDropped }"
@@ -13,7 +14,7 @@
             </slot>
             <slot></slot>
             <slot name="bottom">
-                <div class="loadmore-hint loadmore-hint-bottom" v-if="bottomMethod && direction === 'up' && !bottomAllLoaded">
+                <div class="loadmore-hint loadmore-hint-bottom" v-if="bottomMethod">
                     <loading size="md" v-if="showLoading" />
                     <span class="loadmore-text">{{ showLoading && bottomLoadingText || bottomText }}</span>
                 </div>
@@ -65,15 +66,20 @@
             },
             bottomLoadingText: {
                 type: String,
-                default: 'loading...',
+                default: '加载中',
+            },
+            bottomAllLoadedText: {
+                type: String,
+                default: '没有更多了',
             },
             bottomDistance: {
                 type: Number,
                 default: 70,
             },
+            // 距离底部bottomOffset 就认为到达底部
             bottomOffset: {
                 type: Number,
-                default: 0,
+                default: 10,
             },
             bottomMethod: {
                 type: Function,
@@ -146,11 +152,17 @@
                     case 'loading':
                         this.bottomText = this.bottomLoadingText;
                         break;
+                    case 'allLoaded':
+                        this.bottomText = this.bottomAllLoadedText
                     default:
                         break;
                 }
                 this.$emit('bottomStatusChanged', status);
             },
+            // 初始化 / 滑动过程过 度可能全部加载完成
+            bottomAllLoaded(allLoaded) {
+                allLoaded && (this.bottomStatus = 'allLoaded')
+            },
         },
         methods: {
             // 初始化上拉加载
@@ -166,6 +178,7 @@
             },
             // 初始化下拉刷新
             async initDownContent() {
+                // todo 回弹阻尼
                 await this.handlePullDownRefresh()
                 this.topText = this.topLoadingText;
                 this.topStatus = 'pull';
@@ -202,12 +215,12 @@
                 this.topStatus = 'pull';
             },
             async handleScroll(event) {
-                console.log('111wwwwwwwwwwwwww')
+                console.log('scrollscroll11')
                 this.direction = (this.getScrollTop(this.scrollElement) - this.previousScrollY > 0) ? 'up' : 'down'
-
                 // pull up
                 if(this.direction === 'up') {
                     this.bottomReached = this.bottomReached || this.isBottomReached();
+                    console.log('scroll11222')
                 }
 
                 if(
@@ -218,7 +231,7 @@
                     !this.bottomAllLoaded
                 ) {
                     event.stopPropagation();
-                    console.log('wwwwwwwwwwwwww')
+                    console.log('scroll1133')
                     this.bottomStatus = 'loading';
                     await this.bottomMethod()
                     this.bottomStatus = 'pull';
@@ -228,6 +241,7 @@
                 // pull down
             },
             handleTouchStart(event) {
+                console.log('wwwww22')
                 this.startY = event.touches[0].clientY;
                 this.startScrollTop = this.getScrollTop(this.scrollElement);
                 this.bottomReached = false;
@@ -244,6 +258,7 @@
                 }
             },
             handleTouchMove(event) {
+                console.log('wwwww33')
                 // outside element
                 const rect = this.$el.getBoundingClientRect();
 
@@ -300,6 +315,7 @@
                 // }
             },
             async handleTouchEnd() {
+                console.log('wwwww444')
                 // pull down
                 if(this.direction === 'down' &&
                     this.getScrollTop(this.scrollElement) === 0 &&
@@ -375,6 +391,15 @@
                     this.translate = 0;
                 });
             },
+            setParentHeight() {
+                let parentElement = this.scrollElement.parentElement
+                while (parentElement.tagName !== 'HTML') {
+                    if (parentElement.style.height) break
+
+                    parentElement.style.height = '100%'
+                    parentElement = parentElement.parentElement
+                }
+            },
         },
         created() {
             if (this.topMethod && this.bottomMethod) {
@@ -387,18 +412,21 @@
         },
         mounted() {
             this.scrollElement = this.getScrollElement(this.$el);
-            // this.scrollElement = this.$el
 
-            console.log(this.scrollElement)
+            // 针对老版本向上兼容
+            this.setParentHeight()
+
 
             if(
                 typeof this.topMethod === 'function' ||
                 typeof this.bottomMethod === 'function'
             ) {
-                this.$el.addEventListener('touchstart', this.handleTouchStart);
-                this.$el.addEventListener('touchmove', this.handleTouchMove);
-                this.$el.addEventListener('touchend', this.handleTouchEnd);
-                this.$el.addEventListener('scroll', this.handleScroll)
+                console.log('kkkkk')
+                this.scrollElement.addEventListener('touchstart', this.handleTouchStart);
+                this.scrollElement.addEventListener('touchmove', this.handleTouchMove);
+                this.scrollElement.addEventListener('touchend', this.handleTouchEnd);
+                this.scrollElement.addEventListener('scroll', this.handleScroll, true)
+                // window.addEventListener('scroll', this.handleScroll)
             }
         },
         beforeDestroy() {
diff --git a/src/styles/modules/loadmore.scss b/src/styles/modules/loadmore.scss
index 00d01b3..672837a 100644
--- a/src/styles/modules/loadmore.scss
+++ b/src/styles/modules/loadmore.scss
@@ -1,6 +1,6 @@
-.loadmore {
-    overflow: hidden;
-}
+// .loadmore {
+//     overflow: hidden;
+// }
 
 .loadmore-content {
     &.dropped {