scroller: use sequential keys for dash
parent
9a52caacc3
commit
cbe6629372
|
@ -19,7 +19,7 @@
|
||||||
<div class="icon"> <ScrollIcon :size="20" /> </div>
|
<div class="icon"> <ScrollIcon :size="20" /> </div>
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<div v-for="tick of visibleTicks" :key="tick.dayId"
|
<div v-for="tick of visibleTicks" :key="tick.key"
|
||||||
class="tick"
|
class="tick"
|
||||||
:class="{ 'dash': !tick.text }"
|
:class="{ 'dash': !tick.text }"
|
||||||
:style="{ transform: `translateY(${tick.top}px)` }">
|
:style="{ transform: `translateY(${tick.top}px)` }">
|
||||||
|
@ -77,7 +77,15 @@ export default class ScrollerManager extends Mixins(GlobalMixin) {
|
||||||
|
|
||||||
/** Get the visible ticks */
|
/** Get the visible ticks */
|
||||||
get visibleTicks() {
|
get visibleTicks() {
|
||||||
return this.ticks.filter(tick => tick.s);
|
let key = 999900;
|
||||||
|
return this.ticks.filter(tick => tick.s).map(tick => {
|
||||||
|
if (tick.text) {
|
||||||
|
tick.key = key = tick.dayId * 100;
|
||||||
|
} else {
|
||||||
|
tick.key = ++key; // days are sorted descending
|
||||||
|
}
|
||||||
|
return tick;
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
/** Reset state */
|
/** Reset state */
|
||||||
|
|
|
@ -146,6 +146,8 @@ export type ITick = {
|
||||||
text?: string | number;
|
text?: string | number;
|
||||||
/** Whether this tick should be shown */
|
/** Whether this tick should be shown */
|
||||||
s?: boolean;
|
s?: boolean;
|
||||||
|
/** Key for vue component */
|
||||||
|
key?: number
|
||||||
}
|
}
|
||||||
|
|
||||||
export type TopMatter = {
|
export type TopMatter = {
|
||||||
|
|
Loading…
Reference in New Issue