fix(elevator): 修复滚动后无法点击问题 #2603 (#2645)

jdf2e · Nov 9, 2023 · c1eb2c1 · c1eb2c1
1 parent 748a558
commit c1eb2c1
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 49 deletions.
diff --git a/src/packages/__VUE/elevator/__tests__/index.spec.ts b/src/packages/__VUE/elevator/__tests__/index.spec.ts
@@ -51,6 +51,7 @@ const indexList = [
 test('should render elevator list height after height props to be 200', () => {
   const wrapper = mount(Elevator, {
     props: {
+      indexList,
       height: 200
     }
   });

diff --git a/src/packages/__VUE/elevator/index.scss b/src/packages/__VUE/elevator/index.scss
@@ -57,12 +57,6 @@
         }
       }
     }
-    .nut-elevator__list__fixed__wrapper {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-    }
     &__fixed {
       width: 100%;
       position: absolute;
@@ -78,13 +72,6 @@
       box-sizing: border-box;
       box-shadow: $elevator-list-fixed-box-shadow;
       z-index: 1;
-      &--mini {
-        position: sticky;
-        top: -1px;
-      }
-    }
-    &--mini {
-      position: static;
     }
   }
   &__code--current {

diff --git a/src/packages/__VUE/elevator/index.taro.vue b/src/packages/__VUE/elevator/index.taro.vue
@@ -1,5 +1,5 @@
 <template>
-  <view :class="classes">
+  <view class="nut-elevator">
     <nut-scroll-view
       ref="listview"
       class="nut-elevator__list nut-elevator__list--mini"
@@ -10,11 +10,6 @@
       :style="{ height: isNaN(+height) ? height : `${height}px` }"
       @scroll="listViewScroll"
     >
-      <view v-show="scrollY > 0" :style="fixedStyle" class="nut-elevator__list__fixed__wrapper">
-        <view v-if="isSticky" class="nut-elevator__list__fixed nut-elevator__list__fixed--mini">
-          <span class="nut-elevator__fixed-title">{{ indexList[currentIndex][acceptKey] }}</span>
-        </view>
-      </view>
       <view
         v-for="(item, index) in indexList"
         :key="item[acceptKey]"
@@ -36,6 +31,9 @@
         </view>
       </view>
     </nut-scroll-view>
+    <view v-show="scrollY > 2 && isSticky" class="nut-elevator__list__fixed">
+      <view class="nut-elevator__list__fixed-title">{{ indexList[currentIndex][acceptKey] }}</view>
+    </view>
     <view v-show="scrollStart" v-if="indexList.length > 0" class="nut-elevator__code--current">
       {{ indexList[codeIndex][acceptKey] }}
     </view>
@@ -59,7 +57,7 @@ import { computed, reactive, toRefs, nextTick, ref, Ref, watch, PropType } from
 import { createComponent } from '@/packages/utils/create';
 import { useExpose } from '@/packages/utils/useExpose/index';
 import { ElevatorData } from './type';
-const { componentName, create } = createComponent('elevator');
+const { create } = createComponent('elevator');
 
 import Taro from '@tarojs/taro';
 import ScrollView from '../scroll-view/index.taro.vue';
@@ -118,13 +116,6 @@ export default create({
       scrollY: 0
     });
 
-    const classes = computed(() => {
-      const prefixCls = componentName;
-      return {
-        [prefixCls]: true
-      };
-    });
-
     const clientHeight = computed(() => {
       return listview.value.clientHeight;
     });
@@ -239,7 +230,6 @@ export default create({
     );
 
     return {
-      classes,
       ...toRefs(state),
       clientHeight,
       fixedStyle,

diff --git a/src/packages/__VUE/elevator/index.vue b/src/packages/__VUE/elevator/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <view :class="classes">
+  <view class="nut-elevator">
     <view ref="listview" class="nut-elevator__list" :style="{ height: isNaN(+height) ? height : `${height}px` }">
       <view v-for="item in indexList" :key="item[acceptKey]" :ref="setListGroup" class="nut-elevator__list__item">
         <view class="nut-elevator__list__item__code">{{ item[acceptKey] }}</view>
@@ -16,9 +16,9 @@
           <slot v-else :item="subitem"></slot>
         </view>
       </view>
-      <view v-show="scrollY > 0" v-if="isSticky" class="nut-elevator__list__fixed" :style="fixedStyle">
-        <span class="nut-elevator__fixed-title">{{ indexList[currentIndex][acceptKey] }}</span>
-      </view>
+    </view>
+    <view v-show="scrollY > 0 && isSticky" class="nut-elevator__list__fixed">
+      <view class="nut-elevator__list__fixed-title">{{ indexList[currentIndex][acceptKey] }}</view>
     </view>
     <view v-show="scrollStart" v-if="indexList.length" class="nut-elevator__code--current">{{
       indexList[codeIndex][acceptKey]
@@ -43,7 +43,7 @@ import { computed, reactive, toRefs, nextTick, ref, Ref, watch, onMounted, PropT
 import { createComponent } from '@/packages/utils/create';
 import { useExpose } from '@/packages/utils/useExpose/index';
 import { ElevatorData } from './type';
-const { componentName, create } = createComponent('elevator');
+const { create } = createComponent('elevator');
 
 export default create({
   props: {
@@ -95,19 +95,6 @@ export default create({
       fixedTop: 0
     });
 
-    const classes = computed(() => {
-      const prefixCls = componentName;
-      return {
-        [prefixCls]: true
-      };
-    });
-
-    const fixedStyle = computed(() => {
-      return {
-        transform: `translate3d(0, ${state.scrollY + state.fixedTop}px, 0)`
-      };
-    });
-
     const clientHeight = computed(() => {
       return listview.value.clientHeight;
     });
@@ -196,7 +183,9 @@ export default create({
     };
 
     onMounted(() => {
-      listview.value.addEventListener('scroll', listViewScroll);
+      if (listview.value) {
+        listview.value.addEventListener('scroll', listViewScroll);
+      }
     });
 
     useExpose({
@@ -232,9 +221,7 @@ export default create({
     );
 
     return {
-      classes,
       ...toRefs(state),
-      fixedStyle,
       clientHeight,
       setListGroup,
       listview,