From c53c4a78bb681c4d0e901d09935a299cb45f176c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@youzan.com>
Date: Tue, 24 Dec 2019 11:40:01 +0800
Subject: [PATCH] feat(Calendar): change title when scrolling

---
 src/calendar/index.js | 33 +++++++++++++++++++++++++++++++--
 1 file changed, 31 insertions(+), 2 deletions(-)

diff --git a/src/calendar/index.js b/src/calendar/index.js
index 7838a0581..4015f186d 100644
--- a/src/calendar/index.js
+++ b/src/calendar/index.js
@@ -1,4 +1,5 @@
 import { isDate } from '../utils/validate/date';
+import { getScrollTop } from '../utils/dom/scroll';
 import { createComponent, bem, compareMonth, formatMonthTitle } from './utils';
 import Header from './Header';
 
@@ -42,6 +43,8 @@ export default createComponent({
   },
 
   data() {
+    this.monthsHeight = [];
+
     return {
       currentMonth: this.minDate
     };
@@ -69,12 +72,22 @@ export default createComponent({
     }
   },
 
+  mounted() {
+    this.getMonthsHeight();
+  },
+
   methods: {
+    getMonthsHeight() {
+      this.$refs.month.forEach((month, index) => {
+        this.monthsHeight[index] = month.getBoundingClientRect().height;
+      });
+    },
+
     genMonth(month, index) {
       const showTitle = index !== 0;
 
       return (
-        <div class={bem('month')}>
+        <div class={bem('month')} ref="month" refInFor>
           {showTitle && <div class={bem('month-title')}>{month.title}</div>}
           <div class={bem('days')}>
             {month.days.map(item => (
@@ -83,6 +96,20 @@ export default createComponent({
           </div>
         </div>
       );
+    },
+
+    onScroll() {
+      const scrollTop = getScrollTop(this.$refs.body);
+      let height = 0;
+
+      for (let i = 0; i < this.months.length; i++) {
+        if (scrollTop < height) {
+          this.currentMonth = this.months[i - 1].date;
+          return;
+        }
+
+        height += this.monthsHeight[i];
+      }
     }
   },
 
@@ -90,7 +117,9 @@ export default createComponent({
     return (
       <div class={bem()}>
         <Header title={this.title} currentMonth={this.currentMonth} />
-        <div class={bem('body')}>{this.months.map(this.genMonth)}</div>
+        <div ref="body" class={bem('body')} onScroll={this.onScroll}>
+          {this.months.map(this.genMonth)}
+        </div>
       </div>
     );
   }