Browse Source

fix(elevator): taro click title error(#1281)

suzigang 3 years ago
parent
commit
7a11bdc006

+ 10 - 18
src/packages/__VUE/elevator/index.taro.vue

@@ -42,11 +42,11 @@
   </view>
 </template>
 <script lang="ts">
-import { computed, reactive, toRefs, nextTick, ref, Ref, onMounted } from 'vue';
+import { computed, reactive, toRefs, nextTick, ref, Ref, watch } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { useExpose } from '@/packages/utils/useExpose/index';
 const { componentName, create } = createComponent('elevator');
-import Taro, { eventCenter, getCurrentInstance } from '@tarojs/taro';
+import Taro from '@tarojs/taro';
 interface ElevatorData {
   name: string;
   id: number | string;
@@ -85,7 +85,6 @@ export default create({
       currentIndex: 0,
       query: Taro.createSelectorQuery(),
       scrollTop: 0,
-      storageListHeight: [] as number[],
       currentData: {} as ElevatorData
     });
 
@@ -125,15 +124,14 @@ export default create({
     };
 
     const calculateHeight = () => {
+      state.listHeight = [];
       let height = 0;
       state.listHeight.push(height);
-      state.storageListHeight.push(height);
       for (let i = 0; i < state.listGroup.length; i++) {
         state.query.selectAll(`.elevator__item__${i}`).boundingClientRect();
         state.query.exec((res: any) => {
           height += res[i][0].height;
           state.listHeight.push(height);
-          state.storageListHeight.push(height);
         });
       }
     };
@@ -142,9 +140,6 @@ export default create({
       if (!index && index !== 0) {
         return;
       }
-      if (!state.listHeight.length) {
-        state.listHeight = state.storageListHeight.slice();
-      }
       if (index < 0) index = 0;
       if (index > state.listHeight.length - 2) index = state.listHeight.length - 2;
       state.currentIndex = index;
@@ -182,20 +177,17 @@ export default create({
       context.emit('click-index', key);
     };
 
-    onMounted(() => {
-      if (Taro.getEnv() === 'WEB') {
-        nextTick(calculateHeight);
-      } else {
-        eventCenter.once((getCurrentInstance() as any).router.onReady, () => {
-          calculateHeight();
-        });
-      }
-    });
-
     useExpose({
       scrollTo
     });
 
+    watch(
+      () => state.listGroup.length,
+      () => {
+        Taro.nextTick(calculateHeight);
+      }
+    );
+
     return {
       classes,
       ...toRefs(state),

+ 9 - 4
src/packages/__VUE/elevator/index.vue

@@ -31,7 +31,7 @@
   </view>
 </template>
 <script lang="ts">
-import { computed, reactive, toRefs, nextTick, ref, Ref } from 'vue';
+import { computed, reactive, toRefs, nextTick, ref, Ref, watch } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { useExpose } from '@/packages/utils/useExpose/index';
 const { componentName, create } = createComponent('elevator');
@@ -121,9 +121,6 @@ export default create({
       if (!index && index !== 0) {
         return;
       }
-      if (!state.listHeight.length) {
-        calculateHeight();
-      }
       if (index < 0) index = 0;
       if (index > state.listHeight.length - 2) index = state.listHeight.length - 2;
       state.currentIndex = index;
@@ -165,6 +162,14 @@ export default create({
       scrollTo
     });
 
+    watch(
+      () => state.listGroup.length,
+      () => {
+        state.listHeight = [];
+        nextTick(calculateHeight);
+      }
+    );
+
     return {
       classes,
       ...toRefs(state),

+ 1 - 1
src/sites/mobile-taro/vue/src/nav/pages/elevator/index.vue

@@ -4,7 +4,7 @@
     <div class="elevator-wrapper">
       <nut-elevator
         :index-list="dataList"
-        height="600px"
+        height="500px"
         @click-item="clickItem"
         @click-index="clickIndex"
       ></nut-elevator>