blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

fix(Calendar): incorrect month title (#7205)

Browse Source 
* fix(Calendar): incorrect month title

* chore: adjust util order

* fix: snapshot
This commit is contained in:
neverland 2020-09-18 21:38:27 +08:00 committed by GitHub
parent e3d6328815
commit 4528c6b9cc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/calendar/index.js
View File

@ -1,4 +1,5 @@
// Utils // Utils
import { raf } from '../utils/dom/raf';
import { isDate } from '../utils/validate/date'; import { isDate } from '../utils/validate/date';
import { getScrollTop } from '../utils/dom/scroll'; import { getScrollTop } from '../utils/dom/scroll';
import { import {
@ -188,13 +189,13 @@ export default createComponent({
this.$refs.body.getBoundingClientRect().height this.$refs.body.getBoundingClientRect().height
); );
this.onScroll(); this.onScroll();
});
this.scrollIntoView(); this.scrollIntoView();
});
}, },
// scroll to current month // scroll to current month
scrollIntoView() { scrollIntoView() {
this.$nextTick(() => { raf(() => {
const { currentDate } = this; const { currentDate } = this;
if (!currentDate) { if (!currentDate) {
@ -254,29 +255,24 @@ export default createComponent({
onScroll() { onScroll() {
const { body, months } = this.$refs; const { body, months } = this.$refs;
const top = getScrollTop(body); const top = getScrollTop(body);
const bottom = top + this.bodyHeight;
const heights = months.map((item) => item.getHeight()); const heights = months.map((item) => item.getHeight());
const heightSum = heights.reduce((a, b) => a + b, 0); const heightSum = heights.reduce((a, b) => a + b, 0);
// iOS scroll bounce may exceed the range // iOS scroll bounce may exceed the range
let bottom = top + this.bodyHeight;
if (bottom > heightSum && top > 0) { if (bottom > heightSum && top > 0) {
bottom = heightSum; return;
} }
let height = 0; let height = 0;
let currentMonth; let currentMonth;
let visibleIndex;
// 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;
for (let i = 0; i < months.length; i++) { for (let i = 0; i < months.length; i++) {
const visible = const visible = height <= bottom && height + heights[i] >= top;
height <= viewportBottom && height + heights[i] >= viewportTop;
if (visible && !currentMonth) { if (visible && !currentMonth) {
visibleIndex = i;
currentMonth = months[i]; currentMonth = months[i];
} }
@ -287,10 +283,13 @@ export default createComponent({
}); });
} }
months[i].visible = visible;
height += heights[i]; height += heights[i];
} }
months.forEach((month, index) => {
month.visible = index >= visibleIndex - 1 && index <= visibleIndex + 1;
});
/* istanbul ignore else */ /* istanbul ignore else */
if (currentMonth) { if (currentMonth) {
this.subtitle = currentMonth.title; this.subtitle = currentMonth.title;

35
src/calendar/test/__snapshots__/demo.spec.js.snap
View File

@ -139,40 +139,7 @@ exports[`renders demo correctly 1`] = `
</div> </div>
<div class="van-calendar__month" style="padding-bottom: 0px;"> <div class="van-calendar__month" style="padding-bottom: 0px;">
<div class="van-calendar__month-title">2012年3月</div> <div class="van-calendar__month-title">2012年3月</div>
<div role="grid" class="van-calendar__days"> <div></div>
<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> <div class="van-calendar__footer"></div>