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

[bugfix] IndexBar: activeAnchor bug fixes (#3832)

Browse Source 
修复 sticky 设为 false 时activeAnchor失效的bug；
修复 this.scroller 不为 window 时activeAnchor错乱的bug；
This commit is contained in:
cesc fabregas 2019-07-12 09:49:10 +08:00 committed by neverland
parent 9aab46f3a2
commit c88bab21c1
2 changed files with 19 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/index-bar/index.js
View File

@ -77,11 +77,9 @@ export default createComponent({
methods: { methods: {
onScroll() { onScroll() {
if (!this.sticky) { const scrollTop = this.scroller === window
return; ? getScrollTop(this.scroller)
} : 0;
const scrollTop = getScrollTop(this.scroller);
const rects = this.children.map(item => ({ const rects = this.children.map(item => ({
height: item.height, height: item.height,
top: getElementTop(item.$el) top: getElementTop(item.$el)
@ -90,18 +88,21 @@ export default createComponent({
const active = this.getActiveAnchorIndex(scrollTop, rects); const active = this.getActiveAnchorIndex(scrollTop, rects);
this.activeAnchorIndex = this.indexList[active]; this.activeAnchorIndex = this.indexList[active];
this.children.forEach((item, index) => {
if (index === active) { if (this.sticky) {
item.active = true; this.children.forEach((item, index) => {
item.top = Math.max(this.stickyOffsetTop, rects[index].top - scrollTop); if (index === active) {
} else if (index === active - 1) { item.active = true;
const activeItemTop = rects[active].top - scrollTop; item.top = Math.max(this.stickyOffsetTop, rects[index].top - scrollTop);
item.active = activeItemTop > 0; } else if (index === active - 1) {
item.top = activeItemTop - item.height; const activeItemTop = rects[active].top - scrollTop;
} else { item.active = activeItemTop > 0;
item.active = false; item.top = activeItemTop - item.height;
} } else {
}); item.active = false;
}
});
}
}, },
getActiveAnchorIndex(scrollTop, rects) { getActiveAnchorIndex(scrollTop, rects) {

2
src/index-bar/test/__snapshots__/index.spec.js.snap
View File

@ -14,7 +14,7 @@ exports[`custom anchor text 1`] = `
exports[`scroll and update active anchor 1`] = ` exports[`scroll and update active anchor 1`] = `
<div class="van-index-bar"> <div class="van-index-bar">
<div class="van-index-bar__sidebar" style="z-index: 1;"><span data-index="A" class="van-index-bar__index">A</span><span data-index="B" class="van-index-bar__index">B</span><span data-index="C" class="van-index-bar__index">C</span><span data-index="D" class="van-index-bar__index">D</span><span data-index="E" class="van-index-bar__index">E</span><span data-index="F" class="van-index-bar__index">F</span><span data-index="G" class="van-index-bar__index">G</span><span data-index="H" class="van-index-bar__index">H</span><span data-index="I" class="van-index-bar__index">I</span><span data-index="J" class="van-index-bar__index">J</span><span data-index="K" class="van-index-bar__index">K</span><span data-index="L" class="van-index-bar__index">L</span><span data-index="M" class="van-index-bar__index">M</span><span data-index="N" class="van-index-bar__index">N</span><span data-index="O" class="van-index-bar__index">O</span><span data-index="P" class="van-index-bar__index">P</span><span data-index="Q" class="van-index-bar__index">Q</span><span data-index="R" class="van-index-bar__index">R</span><span data-index="S" class="van-index-bar__index">S</span><span data-index="T" class="van-index-bar__index">T</span><span data-index="U" class="van-index-bar__index">U</span><span data-index="V" class="van-index-bar__index">V</span><span data-index="W" class="van-index-bar__index">W</span><span data-index="X" class="van-index-bar__index">X</span><span data-index="Y" class="van-index-bar__index">Y</span><span data-index="Z" class="van-index-bar__index">Z</span></div> <div class="van-index-bar__sidebar" style="z-index: 1;"><span data-index="A" class="van-index-bar__index">A</span><span data-index="B" class="van-index-bar__index van-index-bar__index--active" style="color: rgb(7, 193, 96);">B</span><span data-index="C" class="van-index-bar__index">C</span><span data-index="D" class="van-index-bar__index">D</span><span data-index="E" class="van-index-bar__index">E</span><span data-index="F" class="van-index-bar__index">F</span><span data-index="G" class="van-index-bar__index">G</span><span data-index="H" class="van-index-bar__index">H</span><span data-index="I" class="van-index-bar__index">I</span><span data-index="J" class="van-index-bar__index">J</span><span data-index="K" class="van-index-bar__index">K</span><span data-index="L" class="van-index-bar__index">L</span><span data-index="M" class="van-index-bar__index">M</span><span data-index="N" class="van-index-bar__index">N</span><span data-index="O" class="van-index-bar__index">O</span><span data-index="P" class="van-index-bar__index">P</span><span data-index="Q" class="van-index-bar__index">Q</span><span data-index="R" class="van-index-bar__index">R</span><span data-index="S" class="van-index-bar__index">S</span><span data-index="T" class="van-index-bar__index">T</span><span data-index="U" class="van-index-bar__index">U</span><span data-index="V" class="van-index-bar__index">V</span><span data-index="W" class="van-index-bar__index">W</span><span data-index="X" class="van-index-bar__index">X</span><span data-index="Y" class="van-index-bar__index">Y</span><span data-index="Z" class="van-index-bar__index">Z</span></div>
<div data-index="0"> <div data-index="0">
<div class="van-index-anchor">1</div> <div class="van-index-anchor">1</div>
</div> </div>