[new feature] IndexBar: add sticky prop (#3402)
This commit is contained in:
neverland
@@ -64,6 +64,7 @@ export default {
|
||||
|------|------|------|------|
|
||||
| index-list | Index List | `Array` | `A-Z` |
|
||||
| z-index | z-index | `Number` | `1` |
|
||||
| sticky | Whether to enable anchor sticky top | `Boolean` | `true` |
|
||||
|
||||
### IndexAnchor Props
|
||||
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
import { use } from '../utils';
|
||||
import { TouchMixin } from '../mixins/touch';
|
||||
import { ParentMixin } from '../mixins/relation';
|
||||
import { on, off } from '../utils/event';
|
||||
import { getScrollTop, getElementTop, getScrollEventTarget } from '../utils/scroll';
|
||||
|
||||
const [sfc, bem] = use('index-bar');
|
||||
|
||||
@@ -8,6 +10,10 @@ export default sfc({
|
||||
mixins: [TouchMixin, ParentMixin('vanIndexBar')],
|
||||
|
||||
props: {
|
||||
sticky: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
zIndex: {
|
||||
type: Number,
|
||||
default: 1
|
||||
@@ -27,13 +33,72 @@ export default sfc({
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.scroller = getScrollEventTarget(this.$el);
|
||||
this.handler(true);
|
||||
},
|
||||
|
||||
destroyed() {
|
||||
this.handler(false);
|
||||
},
|
||||
|
||||
activated() {
|
||||
this.handler(true);
|
||||
},
|
||||
|
||||
deactivated() {
|
||||
this.handler(false);
|
||||
},
|
||||
|
||||
methods: {
|
||||
onClick(event) {
|
||||
this.scrollToElement(event.target);
|
||||
handler(bind) {
|
||||
/* istanbul ignore else */
|
||||
if (this.binded !== bind) {
|
||||
this.binded = bind;
|
||||
(bind ? on : off)(this.scroller, 'scroll', this.onScroll);
|
||||
}
|
||||
},
|
||||
|
||||
onTouchStart(event) {
|
||||
this.touchStart(event);
|
||||
onScroll() {
|
||||
if (!this.sticky) {
|
||||
return;
|
||||
}
|
||||
|
||||
const scrollTop = getScrollTop(this.scroller);
|
||||
const rects = this.children.map(item => ({
|
||||
height: item.height,
|
||||
top: getElementTop(item.$el)
|
||||
}));
|
||||
|
||||
const active = this.getActiveAnchorIndex(scrollTop, rects);
|
||||
|
||||
this.children.forEach((item, index) => {
|
||||
if (index === active) {
|
||||
item.active = true;
|
||||
item.top = Math.max(0, rects[index].top - scrollTop);
|
||||
} else if (index === active - 1) {
|
||||
const activeItemTop = rects[active].top - scrollTop;
|
||||
item.active = activeItemTop > 0;
|
||||
item.top = activeItemTop - rects[active].height;
|
||||
} else {
|
||||
item.active = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
getActiveAnchorIndex(scrollTop, rects) {
|
||||
for (let i = this.children.length - 1; i >= 0; i--) {
|
||||
const prevHeight = i > 0 ? rects[i - 1].height : 0;
|
||||
|
||||
if (scrollTop + prevHeight >= rects[i].top) {
|
||||
return i;
|
||||
}
|
||||
}
|
||||
return -1;
|
||||
},
|
||||
|
||||
onClick(event) {
|
||||
this.scrollToElement(event.target);
|
||||
},
|
||||
|
||||
onTouchMove(event) {
|
||||
@@ -80,7 +145,7 @@ export default sfc({
|
||||
class={bem('sidebar')}
|
||||
style={{ zIndex: this.zIndex }}
|
||||
onClick={this.onClick}
|
||||
onTouchstart={this.onTouchStart}
|
||||
onTouchstart={this.touchStart}
|
||||
onTouchmove={this.onTouchMove}
|
||||
onTouchend={this.onTouchEnd}
|
||||
onTouchcancel={this.onTouchEnd}
|
||||
|
||||
@@ -15,7 +15,9 @@ exports[`renders demo correctly 1`] = `
|
||||
<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>
|
||||
<div class="van-index-anchor">A</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">A</div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
@@ -27,7 +29,9 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">B</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">B</div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
@@ -39,7 +43,9 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">C</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">C</div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
@@ -51,7 +57,9 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">D</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">D</div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
@@ -63,7 +71,9 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">E</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">E</div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
@@ -75,7 +85,9 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">F</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">F</div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
@@ -87,7 +99,9 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">G</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">G</div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
@@ -99,7 +113,9 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">H</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">H</div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
@@ -111,7 +127,9 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">I</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">I</div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
@@ -123,7 +141,9 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">J</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">J</div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
@@ -135,7 +155,9 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">K</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">K</div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
@@ -147,7 +169,9 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">L</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">L</div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
@@ -159,7 +183,9 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">M</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">M</div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
@@ -171,7 +197,9 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">N</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">N</div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
@@ -183,7 +211,9 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">O</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">O</div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
@@ -195,7 +225,9 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">P</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">P</div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
@@ -207,7 +239,9 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">Q</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">Q</div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
@@ -219,7 +253,9 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">R</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">R</div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
@@ -231,7 +267,9 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">S</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">S</div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
@@ -243,7 +281,9 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">T</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">T</div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
@@ -255,7 +295,9 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">U</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">U</div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
@@ -267,7 +309,9 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">V</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">V</div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
@@ -279,7 +323,9 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">W</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">W</div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
@@ -291,7 +337,9 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">X</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">X</div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
@@ -303,7 +351,9 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">Y</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">Y</div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
@@ -315,7 +365,9 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">Z</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">Z</div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
|
||||
@@ -3,7 +3,11 @@
|
||||
exports[`custom anchor text 1`] = `
|
||||
<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-anchor">Title A</div>
|
||||
<div class="van-index-anchor">Title B</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">Title A</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">Title B</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@@ -68,6 +68,7 @@ export default {
|
||||
|------|------|------|------|------|
|
||||
| index-list | 索引字符列表 | `Array` | `A-Z` | - |
|
||||
| z-index | z-index 层级 | `Number` | `1` | - |
|
||||
| sticky | 是否开启锚点自动吸顶 | `Boolean` | `true` | - |
|
||||
|
||||
### IndexAnchor Props
|
||||
|
||||
|
||||
Reference in New Issue
Block a user