refactor: refactor code and add comment

src/components/UserPanel.vue

@@ -39,9 +39,9 @@
     <div
       class="main"
       ref="main"
-      @pointerdown="touchStart"
+      @touchstart="touchStart"
-      @pointermove="touchMove"
+      @touchmove="touchMove"
-      @pointerup="touchEnd"
+      @touchend="touchEnd"
     >
       <!--   src="@/assets/img/header-bg.png"   -->
       <header>
@@ -193,7 +193,7 @@
           <span>你可能感兴趣</span>
           <img src="@/assets/img/icon/about-gray.png" />
         </div>
-        <div class="friends" @pointermove="stop">
+        <div class="friends" @touchmove="stop">
           <div class="friend" :key="i" v-for="(item, i) in baseStore.friends.all">
             <img
               :style="item.select ? 'opacity: .5;' : ''"
@@ -291,8 +291,7 @@ const state = reactive({
   canMoveMaxHeight: document.body.clientHeight / 4,
   //是否自动放大Cover
   isAutoScaleCover: false,
-  uid: null,
+  uid: null
-  isDown: false
 })
 
 watch(
@@ -352,10 +351,9 @@ function scroll() {
   }
 }
 
-function touchStart(e: PointerEvent) {
+function touchStart(e: TouchEvent) {
-  state.isDown = true
+  state.start.x = e.touches[0].pageX
-  state.start.x = e.pageX
+  state.start.y = e.touches[0].pageY
-  state.start.y = e.pageY
   state.start.time = Date.now()
   state.isTop = page.value.scrollTop === 0
   if (state.isTop) {
@@ -364,12 +362,9 @@ function touchStart(e: PointerEvent) {
   // console.log('touchStart', page.value.scrollTop)
 }
 
-function touchMove(e: PointerEvent) {
+function touchMove(e: TouchEvent) {
-  if (!state.isDown) {
+  state.move.x = e.touches[0].pageX - state.start.x
-    return
+  state.move.y = e.touches[0].pageY - state.start.y
-  }
-  state.move.x = e.pageX - state.start.x
-  state.move.y = e.pageY - state.start.y
   let isNext = state.move.y < 0
 
   // console.log('touchMove', page.value.scrollTop)
@@ -382,7 +377,6 @@ function touchMove(e: PointerEvent) {
 }
 
 function touchEnd() {
-  state.isDown = false
   if (state.isTop) {
     state.isTop = false
     cover.value.style.transition = 'all .3s'

src/components/slide/SlideAlbum.vue

@@ -102,12 +102,12 @@ import {
   watch
 } from 'vue'
 import {
-  getSlideDistance,
+  getSlideOffset,
   slideInit,
   slideReset,
-  slideTouchEnd,
+  slideTouchUp,
-  slideTouchMove,
+  slidePointerMove,
-  slideTouchStart
+  slidePointerDown
 } from '@/utils/slide'
 import { SlideAlbumOperationStatus, SlideItemPlayStatus, SlideType } from '../../utils/const_var'
 import ItemToolbar from './ItemToolbar'
@@ -243,6 +243,8 @@ const wrapperEl = ref(null)
 let lockDatetime = 0
 
 const state = reactive({
+  type: SlideType.HORIZONTAL,
+  judgeValue: 20,
   name: 'SlideHorizontal',
   localIndex: 0,
   needCheck: true,
@@ -354,7 +356,7 @@ watch(
     GM.$setCss(
       wrapperEl.value,
       'transform',
-      `translate3d(${getSlideDistance(state, SlideType.HORIZONTAL)}px, 0, 0)`
+      `translate3d(${getSlideOffset(state, wrapperEl.value)}px, 0, 0)`
     )
   }
 )
@@ -408,7 +410,7 @@ function touchStart(e) {
   // Utils.$showNoticeDialog('start'+e.touches.length)
   console.log('start', e.touches.length)
   if (e.touches.length === 1) {
-    slideTouchStart(e, wrapperEl.value, state)
+    slidePointerDown(e, wrapperEl.value, state)
   } else {
     if (state.operationStatus === SlideAlbumOperationStatus.Zooming) {
       // state.start.center = Utils.getCenter(state.start.point1, state.start.point2)
@@ -451,16 +453,14 @@ function touchMove(e) {
     } else {
       // console.log('m2')
       state.isAutoPlay = false
-      slideTouchMove(
+      slidePointerMove(
         e,
         wrapperEl.value,
         state,
-        judgeValue,
         canNext,
         () => {
           // console.log('move-nextcb')
         },
-        SlideType.HORIZONTAL,
         () => {
           if (state.operationStatus !== SlideAlbumOperationStatus.Normal) {
             Utils.$stopPropagation(e)
@@ -567,7 +567,7 @@ function touchEnd(e) {
       startLoop()
       state.operationStatus = SlideAlbumOperationStatus.Look
     } else {
-      slideTouchEnd(
+      slideTouchUp(
         e,
         state,
         canNext,
@@ -582,7 +582,7 @@ function touchEnd(e) {
           startLoop()
         }
       )
-      slideReset(wrapperEl.value, state, SlideType.HORIZONTAL, null)
+      slideReset(wrapperEl.value, state)
     }
   }
 }

src/components/slide/SlideHorizontal.vue

@@ -2,12 +2,12 @@
 import { onMounted, onUnmounted, reactive, ref, watch } from 'vue'
 import GM from '../../utils'
 import {
-  getSlideDistance,
+  getSlideOffset,
   slideInit,
+  slidePointerDown,
+  slidePointerMove,
   slideReset,
-  slideTouchEnd,
+  slideTouchUp
-  slideTouchMove,
-  slideTouchStart
 } from '@/utils/slide'
 import { SlideType } from '@/utils/const_var'
 
@@ -31,17 +31,22 @@ const props = defineProps({
 const emit = defineEmits(['update:index'])
 
 let ob = null
-const judgeValue = 20
 const wrapperEl = ref(null)
 const state = reactive({
+  judgeValue: 20,
+  type: SlideType.HORIZONTAL,
   name: props.name,
   localIndex: props.index,
   needCheck: true,
   next: false,
   start: { x: 0, y: 0, time: 0 },
   move: { x: 0, y: 0 },
-  wrapper: { width: 0, height: 0, childrenLength: 0 },
+  wrapper: {
-  isDown: false
+    width: 0,
+    height: 0,
+    //childrenLength用于canNext方法判断当前页是否是最后一页，是则不能滑动，不捕获事件
+    childrenLength: 0
+  }
 })
 
 watch(
@@ -55,15 +60,17 @@ watch(
       GM.$setCss(
         wrapperEl.value,
         'transform',
-        `translate3d(${getSlideDistance(state, SlideType.HORIZONTAL, wrapperEl.value)}px, 0, 0)`
+        `translate3d(${getSlideOffset(state, wrapperEl.value)}px, 0, 0)`
       )
     }
   }
 )
 
 onMounted(() => {
-  slideInit(wrapperEl.value, state, SlideType.HORIZONTAL)
+  slideInit(wrapperEl.value, state)
 
+  //观察子元素数量变动，获取最新数量
+  //childrenLength用于canNext方法判断当前页是否是最后一页，是则不能滑动，不捕获事件
   ob = new MutationObserver(() => {
     state.wrapper.childrenLength = wrapperEl.value.children.length
   })
@@ -74,27 +81,17 @@ onUnmounted(() => {
   ob.disconnect()
 })
 
-function touchStart(e: PointerEvent) {
+function touchStart(e: TouchEvent) {
-  slideTouchStart(e, wrapperEl.value, state)
+  slidePointerDown(e, wrapperEl.value, state)
 }
 
-function touchMove(e: PointerEvent) {
+function touchMove(e: TouchEvent) {
-  slideTouchMove(
+  slidePointerMove(e, wrapperEl.value, state, canNext)
-    e,
-    wrapperEl.value,
-    state,
-    judgeValue,
-    canNext,
-    null,
-    SlideType.HORIZONTAL,
-    null,
-    null
-  )
 }
 
-function touchEnd(e: PointerEvent) {
+function touchEnd(e: TouchEvent) {
-  slideTouchEnd(e, state, canNext, () => {})
+  slideTouchUp(e, state, canNext, () => {})
-  slideReset(wrapperEl.value, state, SlideType.HORIZONTAL, emit)
+  slideReset(wrapperEl.value, state, emit)
 }
 
 function canNext(isNext: boolean) {
@@ -110,9 +107,9 @@ function canNext(isNext: boolean) {
     <div
       class="slide-list"
       ref="wrapperEl"
-      @pointerdown="touchStart"
+      @touchstart="touchStart"
-      @pointermove="touchMove"
+      @touchmove="touchMove"
-      @pointerup="touchEnd"
+      @touchend="touchEnd"
     >
       <slot></slot>
     </div>

src/components/slide/SlideVertical.vue

@@ -2,12 +2,12 @@
 import { onMounted, reactive, ref, watch } from 'vue'
 import GM from '../../utils'
 import {
-  getSlideDistance,
+  getSlideOffset,
   slideInit,
   slideReset,
-  slideTouchEnd,
+  slideTouchUp,
-  slideTouchMove,
+  slidePointerMove,
-  slideTouchStart
+  slidePointerDown
 } from '@/utils/slide'
 import { SlideType } from '@/utils/const_var'
 
@@ -26,17 +26,17 @@ const props = defineProps({
 })
 const emit = defineEmits(['update:index'])
 
-const judgeValue = 20
 const wrapperEl = ref(null)
 const state = reactive({
+  judgeValue: 20,
+  type: SlideType.HORIZONTAL,
   name: 'SlideVertical',
   localIndex: props.index,
   needCheck: true,
   next: false,
   start: { x: 0, y: 0, time: 0 },
   move: { x: 0, y: 0 },
-  wrapper: { width: 0, height: 0, childrenLength: 0 },
+  wrapper: { width: 0, height: 0, childrenLength: 0 }
-  isDown: false
 })
 
 watch(
@@ -50,27 +50,27 @@ watch(
       GM.$setCss(
         wrapperEl.value,
         'transform',
-        `translate3d(0,${getSlideDistance(state, SlideType.VERTICAL)}px, 0)`
+        `translate3d(0,${getSlideOffset(state, wrapperEl.value)}px, 0)`
       )
     }
   }
 )
 
 onMounted(() => {
-  slideInit(wrapperEl.value, state, SlideType.VERTICAL)
+  slideInit(wrapperEl.value, state)
 })
 
 function touchStart(e) {
-  slideTouchStart(e, wrapperEl.value, state)
+  slidePointerDown(e, wrapperEl.value, state)
 }
 
 function touchMove(e) {
-  slideTouchMove(e, wrapperEl.value, state, judgeValue, canNext, null, SlideType.VERTICAL)
+  slidePointerMove(e, wrapperEl.value, state, canNext)
 }
 
 function touchEnd(e) {
-  slideTouchEnd(e, state, canNext, null, null, SlideType.VERTICAL)
+  slideTouchUp(e, state, canNext, null, null, SlideType.VERTICAL)
-  slideReset(wrapperEl.value, state, SlideType.VERTICAL, emit)
+  slideReset(wrapperEl.value, state, emit)
 }
 
 function canNext(isNext) {
@@ -86,9 +86,9 @@ function canNext(isNext) {
     <div
       class="slide-list flex-direction-column"
       ref="wrapperEl"
-      @pointerdown="touchStart"
+      @touchstart="touchStart"
-      @pointermove="touchMove"
+      @touchmove="touchMove"
-      @pointerup="touchEnd"
+      @touchend="touchEnd"
     >
       <slot></slot>
     </div>

src/components/slide/SlideVerticalInfinite.vue

@@ -2,12 +2,12 @@
 import { createApp, onMounted, reactive, ref, render as vueRender, watch } from 'vue'
 import GM from '../../utils'
 import {
-  getSlideDistance,
+  getSlideOffset,
   slideInit,
   slideReset,
-  slideTouchEnd,
+  slideTouchUp,
-  slideTouchMove,
+  slidePointerMove,
-  slideTouchStart
+  slidePointerDown
 } from '@/utils/slide'
 import { SlideType } from '@/utils/const_var'
 import SlideItem from '@/components/slide/SlideItem.vue'
@@ -62,14 +62,15 @@ const appInsMap = new Map()
 const itemClassName = 'slide-item'
 const wrapperEl = ref(null)
 const state = reactive({
+  judgeValue: 20,
+  type: SlideType.VERTICAL,
   name: props.name,
   localIndex: props.index,
   needCheck: true,
   next: false,
   start: { x: 0, y: 0, time: 0 },
   move: { x: 0, y: 0 },
-  wrapper: { width: 0, height: 0, childrenLength: 0 },
+  wrapper: { width: 0, height: 0, childrenLength: 0 }
-  isDown: false
 })
 const baseStore = useBaseStore()
 
@@ -169,11 +170,7 @@ function insertContent(list = props.list) {
     let el = getInsEl(item, start + index, start + index === state.localIndex)
     wrapperEl.value.appendChild(el)
   })
-  GM.$setCss(
+  GM.$setCss(wrapperEl.value, 'transform', `translate3d(0px,${getSlideOffset(state)}px,  0px)`)
-    wrapperEl.value,
-    'transform',
-    `translate3d(0px,${getSlideDistance(state, SlideType.VERTICAL)}px,  0px)`
-  )
 
   if (state.localIndex > 2 && list.length > 5) {
     $(wrapperEl.value)
@@ -229,12 +226,12 @@ function getInsEl(item, index, play = false) {
 }
 
 function touchStart(e) {
-  slideTouchStart(e, wrapperEl.value, state)
+  slidePointerDown(e, wrapperEl.value, state)
 }
 
 //TODO 2022-3-28:在最顶部，反复滑动会抖动一下，初步猜测是因为方向变了，导致的加判断距离变成了减
 function touchMove(e) {
-  slideTouchMove(e, wrapperEl.value, state, baseStore.judgeValue, canNext, null, SlideType.VERTICAL)
+  slidePointerMove(e, wrapperEl.value, state, canNext)
 }
 
 function touchEnd(e) {
@@ -246,7 +243,7 @@ function touchEnd(e) {
   ) {
     emit('refresh')
   }
-  slideTouchEnd(
+  slideTouchUp(
     e,
     state,
     canNext,
@@ -325,7 +322,7 @@ function touchEnd(e) {
     null,
     SlideType.VERTICAL
   )
-  slideReset(wrapperEl.value, state, SlideType.VERTICAL, emit)
+  slideReset(wrapperEl.value, state, emit)
 }
 
 function canNext(isNext) {
@@ -343,9 +340,9 @@ function canNext(isNext) {
       class="slide-list flex-direction-column"
       ref="wrapperEl"
       @click="null"
-      @pointerdown="touchStart"
+      @touchstart="touchStart"
-      @pointermove="touchMove"
+      @touchmove="touchMove"
-      @pointerup="touchEnd"
+      @touchend="touchEnd"
     >
       <slot></slot>
     </div>

src/pages/home/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="test-slide-wrapper" id="home-index">
-    <SlideHorizontal v-model:index="state.baseIndex">
+    <SlideHorizontal name="first" v-model:index="state.baseIndex">
       <SlideItem class="sidebar">
         <div class="header">
           <div class="left">下午好</div>
@@ -100,13 +100,13 @@
         <IndicatorHome
           v-if="!state.fullScreen"
           :loading="baseStore.loading"
-          name="main"
+          name="second"
           @showSlidebar="state.baseIndex = 0"
           v-model:index="state.navIndex"
         />
         <SlideHorizontal
           class="first-horizontal-item"
-          name="main"
+          name="second"
           :change-active-index-use-anim="false"
           v-model:index="state.navIndex"
         >

src/pages/home/slide/Community.vue

@@ -11,7 +11,7 @@
         </div>
         <WaterfallList :list="list" class="list">
           <template v-slot="{ item }">
-            <div class="card" @click="(e) => test(e, item)">
+            <div class="card" @click="(e) => showDetail(e, item)">
               <img class="poster" v-lazy="_checkImgUrl(item.note_card?.cover?.url_default)" />
               <div class="bottom">
                 <div class="title">
@@ -127,7 +127,7 @@ function close() {
   }, 300)
 }
 
-function test(e, item) {
+function showDetail(e, item) {
   let data = Mock.mock({
     'comment_list|3-50': [
       {

src/pages/home/slide/SlideList.vue

@@ -4,7 +4,7 @@
     v-love="props.uniqueId"
     :id="props.uniqueId"
     :uniqueId="props.uniqueId"
-    name="main"
+    name="infinite"
     :active="props.active"
     :loading="baseStore.loading"
     v-model:index="state.index"

src/utils/slide.js

@@ -4,35 +4,46 @@ import GM from '@/utils/index'
 import { SlideType } from '@/utils/const_var'
 import { nextTick } from 'vue'
 
-export function slideInit(el, state, type) {
+//初始化信息，获取slide dom的长宽、子元素数量，用于move事件判断能否滑动
+export function slideInit(el, state) {
   state.wrapper.width = GM.$getCss(el, 'width')
   state.wrapper.height = GM.$getCss(el, 'height')
   nextTick(() => {
     state.wrapper.childrenLength = el.children.length
   })
 
-  let t = getSlideDistance(state, type, el)
+  //获取偏移量
+  let t = getSlideOffset(state, el)
   let dx1 = 0,
     dx2 = 0
-  if (type === SlideType.HORIZONTAL) dx1 = t
+  if (state.type === SlideType.HORIZONTAL) dx1 = t
   else dx2 = t
   Utils.$setCss(el, 'transform', `translate3d(${dx1}px, ${dx2}px, 0)`)
 }
 
-export function slideTouchStart(e, el, state) {
+export function slidePointerDown(e, el, state) {
   Utils.$setCss(el, 'transition-duration', `0ms`)
-  state.isDown = true
+  //记录起点坐标，用于move事件计算移动距离
-  state.start.x = e.pageX
+  state.start.x = e.touches[0].pageX
-  state.start.y = e.pageY
+  state.start.y = e.touches[0].pageY
+  //记录按下时间，用于up事件判断滑动时间
   state.start.time = Date.now()
 }
 
-//检测能否滑动
+/**
-export function canSlide(state, judgeValue, type = SlideType.HORIZONTAL) {
+ * 检测能否滑动
+ * @param state
+ * @returns {boolean}
+ */
+export function canSlide(state) {
+  //每次按下都需要检测，up事件会重置为true
   if (state.needCheck) {
-    if (Math.abs(state.move.x) > judgeValue || Math.abs(state.move.y) > judgeValue) {
+    //判断move x和y的距离是否大于判断值，因为距离太小无法判断滑动方向
+    if (Math.abs(state.move.x) > state.judgeValue || Math.abs(state.move.y) > state.judgeValue) {
+      //放大再相除，根据长宽比判断方向，angle大于1就是左右滑动，小于是上下滑动
       let angle = (Math.abs(state.move.x) * 10) / (Math.abs(state.move.y) * 10)
-      state.next = type === SlideType.HORIZONTAL ? angle > 1 : angle <= 1
+      //根据当前slide的类型，判断能否滑动，并记录下来，后续不再判断，直接返回记录值
+      state.next = state.type === SlideType.HORIZONTAL ? angle > 1 : angle <= 1
       // console.log('angle', angle, state.next)
       state.needCheck = false
     } else {
@@ -43,44 +54,47 @@ export function canSlide(state, judgeValue, type = SlideType.HORIZONTAL) {
 }
 
 /**
+ * move事件
+ * @param e
+ * @param el
+ * @param state
+ * @param canNextCb 是否能继续滑的回调
+ * @param nextCb 能继续滑的回调
+ * @param notNextCb 不能继续滑的回调
  * @param slideOtherDirectionCb 滑动其他方向时的回调，目前用于图集进于放大模式后，上下滑动推出放大模式
- * */
+ */
-export function slideTouchMove(
+export function slidePointerMove(
   e,
   el,
   state,
-  judgeValue,
+  canNextCb = null,
-  canNextCb,
+  nextCb = null,
-  nextCb,
+  notNextCb = null,
-  type = SlideType.HORIZONTAL,
-  notNextCb,
   slideOtherDirectionCb = null
 ) {
-  if (!state.isDown) {
+  state.move.x = e.touches[0].pageX - state.start.x
-    return
+  state.move.y = e.touches[0].pageY - state.start.y
-  }
+  // console.log('move', state.name)
-  state.move.x = e.pageX - state.start.x
-  state.move.y = e.pageY - state.start.y
 
-  let isNext = type === SlideType.HORIZONTAL ? state.move.x < 0 : state.move.y < 0
+  let isNext = state.type === SlideType.HORIZONTAL ? state.move.x < 0 : state.move.y < 0
 
-  let canSlideRes = canSlide(state, judgeValue, type)
+  let canSlideRes = canSlide(state)
 
-  if (canSlideRes && state.localIndex === 0 && !isNext && type === SlideType.VERTICAL) {
+  if (canSlideRes && state.localIndex === 0 && !isNext && state.type === SlideType.VERTICAL) {
     bus.emit(state.name + '-moveY', state.move.y)
   }
 
   if (canSlideRes) {
     if (canNextCb?.(isNext, e)) {
       nextCb?.()
-      if (type === SlideType.HORIZONTAL) {
+      if (state.type === SlideType.HORIZONTAL) {
         bus.emit(state.name + '-moveX', state.move.x)
       }
       Utils.$stopPropagation(e)
-      let t = getSlideDistance(state, type, el) + (isNext ? judgeValue : -judgeValue)
+      let t = getSlideOffset(state, el) + (isNext ? state.judgeValue : -state.judgeValue)
       let dx1 = 0
       let dx2 = 0
-      if (type === SlideType.HORIZONTAL) {
+      if (state.type === SlideType.HORIZONTAL) {
         dx1 = t + state.move.x
       } else {
         dx2 = t + state.move.y
@@ -95,22 +109,15 @@ export function slideTouchMove(
   }
 }
 
-export function slideTouchEnd(
+export function slideTouchUp(e, state, canNextCb, nextCb, doNotNextCb) {
-  e,
+  let isHorizontal = state.type === SlideType.HORIZONTAL
-  state,
-  canNextCb,
-  nextCb,
-  doNotNextCb,
-  type = SlideType.HORIZONTAL
-) {
-  state.isDown = false
-
-  let isHorizontal = type === SlideType.HORIZONTAL
   let isNext = isHorizontal ? state.move.x < 0 : state.move.y < 0
 
   if (!canNextCb?.(isNext)) return doNotNextCb?.()
   if (state.next) {
-    Utils.$stopPropagation(e)
+    //用pointer事件，子元素在这里拦截事件之后，会导致父元素触发一次pointermove事件
+    //用touch事件，不会出现这种情况
+    // Utils.$stopPropagation(e)
     let endTime = Date.now()
     let gapTime = endTime - state.start.time
     let distance = isHorizontal ? state.move.x : state.move.y
@@ -129,12 +136,12 @@ export function slideTouchEnd(
   doNotNextCb?.()
 }
 
-export function slideReset(el, state, type, emit) {
+export function slideReset(el, state, emit = null) {
   Utils.$setCss(el, 'transition-duration', `300ms`)
-  let t = getSlideDistance(state, type, el)
+  let t = getSlideOffset(state, el)
   let dx1 = 0
   let dx2 = 0
-  if (type === SlideType.HORIZONTAL) {
+  if (state.type === SlideType.HORIZONTAL) {
     bus.emit(state.name + '-end', state.localIndex)
     dx1 = t
   } else {
@@ -148,22 +155,42 @@ export function slideReset(el, state, type, emit) {
   emit?.('update:index', state.localIndex)
 }
 
-export function getSlideDistance(state, type = SlideType.HORIZONTAL, el) {
+//根据当前index，获取slide偏移距离
-  if (type === SlideType.HORIZONTAL) {
+//如果每个页面的宽度是相同均为100%，只需要当前index * wrapper的宽（高）度即可： -state.localIndex * state.wrapper.width
-    //TODO 统一
+export function getSlideOffset(state, el) {
+  //横竖判断逻辑基本同理
+  if (state.type === SlideType.HORIZONTAL) {
+    //TODO 去掉if判断
     if (el) {
       let widths = []
+      //获取所有子元素的宽度
       Array.from(el.children).map((v) => {
         widths.push(v.getBoundingClientRect().width)
       })
+      //取0到当前index的子元素的宽度
       widths = widths.slice(0, state.localIndex)
       if (widths.length) {
+        //累计就是当前index之前所有页面的宽度
         return -widths.reduce((a, b) => a + b)
       }
       return 0
     }
     return -state.localIndex * state.wrapper.width
   } else {
+    //TODO 这里有冲突
+    //infinite 列表只需要计算index * 高就行
+    // if (el) {
+    //   //同上
+    //   let heights = []
+    //   Array.from(el.children).map((v) => {
+    //     heights.push(v.getBoundingClientRect().height)
+    //   })
+    //   heights = heights.slice(0, state.localIndex)
+    //   if (heights.length) {
+    //     return -heights.reduce((a, b) => a + b)
+    //   }
+    //   return 0
+    // }
     return -state.localIndex * state.wrapper.height
   }
 }