Browse Source

upd: 修复elevator暴露方法不生效问题和吸顶抖动问题

suzigang 3 years ago
parent
commit
d80e0d2968

+ 14 - 0
src/packages/__VUE/elevator/index.scss

@@ -57,6 +57,12 @@
         }
       }
     }
+    .nut-elevator__list__fixed__wrapper {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+    }
     &__fixed {
       width: 100%;
       position: absolute;
@@ -71,6 +77,14 @@
       background-color: $elevator-list-fixed-bg-color;
       box-sizing: border-box;
       box-shadow: $elevator-list-fixed-box-shadow;
+      z-index: 1;
+      &--mini {
+        position: sticky;
+        top: -1px;
+      }
+    }
+    &--mini {
+      position: static;
     }
   }
   &__code--current {

+ 14 - 27
src/packages/__VUE/elevator/index.taro.vue

@@ -1,7 +1,7 @@
 <template>
   <view :class="classes">
     <Nut-Scroll-View
-      class="nut-elevator__list scrollview"
+      class="nut-elevator__list nut-elevator__list--mini"
       :scroll-top="scrollTop"
       :scroll-y="true"
       :scroll-with-animation="true"
@@ -10,6 +10,11 @@
       :style="{ height: isNaN(+height) ? height : `${height}px` }"
       @scroll="listViewScroll"
     >
+      <view :style="fixedStyle" class="nut-elevator__list__fixed__wrapper" v-show="scrollY > 0">
+        <view class="nut-elevator__list__fixed nut-elevator__list__fixed--mini" v-if="isSticky">
+          <span class="nut-elevator__fixed-title">{{ indexList[currentIndex][acceptKey] }}</span>
+        </view>
+      </view>
       <view
         :class="['nut-elevator__list__item', `elevator__item__${index}`]"
         v-for="(item, index) in indexList"
@@ -30,9 +35,6 @@
           <slot :item="subitem" v-else></slot>
         </view>
       </view>
-      <view class="nut-elevator__list__fixed" :style="fixedStyle" v-show="scrollY > 0" v-if="isSticky">
-        <span class="nut-elevator__fixed-title">{{ indexList[currentIndex][acceptKey] }}</span>
-      </view>
     </Nut-Scroll-View>
     <view class="nut-elevator__code--current" v-show="scrollStart" v-if="indexList.length > 0">
       {{ indexList[codeIndex][acceptKey] }}
@@ -113,9 +115,7 @@ export default create({
       scrollTop: 0,
       currentData: {} as ElevatorData,
       currentKey: '',
-      scrollY: 0,
-      diff: -1,
-      fixedTop: 0
+      scrollY: 0
     });
 
     const classes = computed(() => {
@@ -125,16 +125,16 @@ export default create({
       };
     });
 
+    const clientHeight = computed(() => {
+      return listview.value.clientHeight;
+    });
+
     const fixedStyle = computed(() => {
       return {
-        transform: `translate3d(0, ${state.scrollY + state.fixedTop}px, 0)`
+        height: `${state.listHeight[state.listGroup.length - 1]}px`
       };
     });
 
-    const clientHeight = computed(() => {
-      return listview.value.clientHeight;
-    });
-
     const getData = (el: HTMLElement): string | void => {
       if (!el.dataset.index) {
         return '0';
@@ -215,12 +215,12 @@ export default create({
         let height2 = listHeight[i + 1];
         if (state.scrollY >= height1 && state.scrollY < height2) {
           state.currentIndex = i;
-          state.diff = height2 - state.scrollY;
           return;
         }
       }
 
       state.currentIndex = listHeight.length - 2;
+      state.scrollTop = state.listHeight[state.currentIndex];
     };
 
     useExpose({
@@ -235,19 +235,6 @@ export default create({
     );
 
     watch(
-      () => state.diff,
-      (newVal: number) => {
-        const listHeight = state.listHeight;
-        let fixedTop = newVal > 0 && newVal < props.titleHeight ? newVal - props.titleHeight : 0;
-        if (state.scrollY + clientHeight.value === listHeight[listHeight.length - 1]) {
-          if (fixedTop !== 0) fixedTop = 0;
-        }
-        if (state.fixedTop === fixedTop) return;
-        state.fixedTop = fixedTop;
-      }
-    );
-
-    watch(
       () => state.currentIndex,
       (newVal: number) => {
         context.emit('change', newVal);
@@ -257,8 +244,8 @@ export default create({
     return {
       classes,
       ...toRefs(state),
-      fixedStyle,
       clientHeight,
+      fixedStyle,
       setListGroup,
       listview,
       touchStart,

+ 1 - 1
src/packages/__VUE/timeselect/doc.taro.md

@@ -285,7 +285,7 @@ app.use(TimeDetail);
     }
   };
 </script>
-<style lang="scss" scoped>
+<style lang="scss">
 .timeselect-title {
   height: 50px;
   p {