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

fix(IndexBar): fix the problem of rolling out parent boundaries when sucking bottom ()

Browse Source
This commit is contained in:
流采 2019-08-24 16:01:55 +08:00 committed by neverland
parent a05a03b8b2
commit 689a579503
3 changed files with 22 additions and 8 deletions
src
index-anchor
index.js
index-bar
index.js
test/__snapshots__
index.spec.js.snap

6
src/index-anchor/index.js

@ -14,7 +14,8 @@ export default createComponent({
data() {
return {
top: 0,
active: false
active: false,
position: 'static'
};
},
@ -26,9 +27,10 @@ export default createComponent({
anchorStyle() {
if (this.sticky) {
return {
position: this.position,
zIndex: `${this.parent.zIndex}`,
transform: `translate3d(0, ${this.top}px, 0)`,
color: this.parent.highlightColor,
zIndex: `${this.parent.zIndex}`
};
}
}

20
src/index-bar/index.js

@ -96,16 +96,28 @@ export default createComponent({
this.activeAnchorIndex = this.indexList[active];
if (this.sticky) {
let activeItemTop = 0;
let isReachEdge = false;
if (active !== -1) {
activeItemTop = rects[active].top - scrollTop;
isReachEdge = activeItemTop <= 0;
}
this.children.forEach((item, index) => {
if (index === active) {
item.active = true;
item.top = Math.max(this.stickyOffsetTop, rects[index].top - scrollTop) + scrollerRect.top;
item.position = isReachEdge ? 'fixed' : 'relative';
item.top = isReachEdge
? this.stickyOffsetTop + scrollerRect.top
: 0;
} else if (index === active - 1) {
const activeItemTop = rects[active].top - scrollTop;
item.active = activeItemTop > 0;
item.top = activeItemTop + scrollerRect.top - item.height;
item.active = !isReachEdge;
item.position = 'relative';
item.top = item.$el.parentElement.offsetHeight - item.height;
} else {
item.active = false;
item.position = 'static';
}
});
}

4
src/index-bar/test/__snapshots__/index.spec.js.snap

@ -34,10 +34,10 @@ exports[`scroll and update active anchor 2`] = `
<div class="van-index-bar">
<div class="van-index-bar__sidebar" style="z-index: 2;"><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" style="height: 10px;">
<div class="van-index-anchor van-index-anchor--sticky van-hairline--bottom" style="transform: translate3d(0, 0px, 0); color: rgb(7, 193, 96); z-index: 1;">1</div>
<div class="van-index-anchor van-index-anchor--sticky van-hairline--bottom" style="position: relative; z-index: 1; transform: translate3d(0, 0px, 0); color: rgb(7, 193, 96);">1</div>
</div>
<div data-index="1" style="height: 10px;">
<div class="van-index-anchor van-index-anchor--sticky van-hairline--bottom" style="transform: translate3d(0, 10px, 0); color: rgb(7, 193, 96); z-index: 1;">2</div>
<div class="van-index-anchor van-index-anchor--sticky van-hairline--bottom" style="position: relative; z-index: 1; transform: translate3d(0, 0px, 0); color: rgb(7, 193, 96);">2</div>
</div>
<div data-index="2">
<div class="van-index-anchor">3</div>