From 4528c6b9cc55be1b59fc2ec057ea526a6df3cfea Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Fri, 18 Sep 2020 21:38:27 +0800
Subject: [PATCH] fix(Calendar): incorrect month title (#7205)

* fix(Calendar): incorrect month title

* chore: adjust util order

* fix: snapshot
---
 src/calendar/index.js                         | 25 +++++++------
 .../test/__snapshots__/demo.spec.js.snap      | 35 +------------------
 2 files changed, 13 insertions(+), 47 deletions(-)

diff --git a/src/calendar/index.js b/src/calendar/index.js
index e3e172677..5fc0c1ec4 100644
--- a/src/calendar/index.js
+++ b/src/calendar/index.js
@@ -1,4 +1,5 @@
 // Utils
+import { raf } from '../utils/dom/raf';
 import { isDate } from '../utils/validate/date';
 import { getScrollTop } from '../utils/dom/scroll';
 import {
@@ -188,13 +189,13 @@ export default createComponent({
           this.$refs.body.getBoundingClientRect().height
         );
         this.onScroll();
+        this.scrollIntoView();
       });
-      this.scrollIntoView();
     },
 
     // scroll to current month
     scrollIntoView() {
-      this.$nextTick(() => {
+      raf(() => {
         const { currentDate } = this;
 
         if (!currentDate) {
@@ -254,29 +255,24 @@ export default createComponent({
     onScroll() {
       const { body, months } = this.$refs;
       const top = getScrollTop(body);
+      const bottom = top + this.bodyHeight;
       const heights = months.map((item) => item.getHeight());
       const heightSum = heights.reduce((a, b) => a + b, 0);
 
       // iOS scroll bounce may exceed the range
-      let bottom = top + this.bodyHeight;
       if (bottom > heightSum && top > 0) {
-        bottom = heightSum;
+        return;
       }
 
       let height = 0;
       let currentMonth;
-
-      // add offset to avoid rem accuracy issues
-      // see: https://github.com/youzan/vant/issues/6929
-      const viewportOffset = 50;
-      const viewportTop = top - viewportOffset;
-      const viewportBottom = bottom + viewportOffset;
+      let visibleIndex;
 
       for (let i = 0; i < months.length; i++) {
-        const visible =
-          height <= viewportBottom && height + heights[i] >= viewportTop;
+        const visible = height <= bottom && height + heights[i] >= top;
 
         if (visible && !currentMonth) {
+          visibleIndex = i;
           currentMonth = months[i];
         }
 
@@ -287,10 +283,13 @@ export default createComponent({
           });
         }
 
-        months[i].visible = visible;
         height += heights[i];
       }
 
+      months.forEach((month, index) => {
+        month.visible = index >= visibleIndex - 1 && index <= visibleIndex + 1;
+      });
+
       /* istanbul ignore else */
       if (currentMonth) {
         this.subtitle = currentMonth.title;
diff --git a/src/calendar/test/__snapshots__/demo.spec.js.snap b/src/calendar/test/__snapshots__/demo.spec.js.snap
index b0a56dda3..74018afa8 100644
--- a/src/calendar/test/__snapshots__/demo.spec.js.snap
+++ b/src/calendar/test/__snapshots__/demo.spec.js.snap
@@ -139,40 +139,7 @@ exports[`renders demo correctly 1`] = `
         </div>
         <div class="van-calendar__month" style="padding-bottom: 0px;">
           <div class="van-calendar__month-title">2012年3月</div>
-          <div role="grid" class="van-calendar__days">
-            <div class="van-calendar__month-mark">3</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day" style="margin-left: 57.142857142857146%;">1</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">2</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">3</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">4</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">5</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">6</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">7</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">8</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">9</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">10</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">11</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">12</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">13</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">14</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">15</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">16</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">17</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">18</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">19</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">20</div>
-            <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">21</div>
-            <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">22</div>
-            <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">23</div>
-            <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">24</div>
-            <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">25</div>
-            <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">26</div>
-            <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">27</div>
-            <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">28</div>
-            <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">29</div>
-            <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">30</div>
-            <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">31</div>
-          </div>
+          <div></div>
         </div>
       </div>
       <div class="van-calendar__footer"></div>