fix(list): 组件事件不被触发 jd-opensource#1607

motian · Sep 29, 2022 · 64088fc · 64088fc
1 parent 01faac5
commit 64088fc
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 13 deletions.
diff --git a/src/packages/__VUE/list/doc.en-US.md b/src/packages/__VUE/list/doc.en-US.md
@@ -98,7 +98,7 @@ body {
 |--------------|----------------------------------|--------|------------------|
 | height         | The height of the list item               | Number | `50`                |
 | list-data         | List data               | any[] | `[]`                |
-| container-height `v3.1.19`        | Container height              | Number | `Visual area height`                |
+| container-height `v3.1.19`        | Container height(The maximum value cannot exceed the viewable area)              | Number | `Visual area height`                |
 
 ### Slot
 

diff --git a/src/packages/__VUE/list/doc.md b/src/packages/__VUE/list/doc.md
@@ -98,7 +98,7 @@ body {
 |--------------|----------------------------------|--------|------------------|
 | height         | 列表项的高度               | Number | `50`                |
 | list-data         | 列表数据               | any[] | `[]`                |
-| container-height `v3.1.19`        | 容器高度              | Number | `可视区高度`                |
+| container-height `v3.1.19`        | 容器高度(最大值不能超过可视区)              | Number | `可视区高度`                |
 
 ### Slot
 

diff --git a/src/packages/__VUE/list/index.scss b/src/packages/__VUE/list/index.scss
@@ -1,6 +1,5 @@
 .nut-list {
   width: 100%;
-  height: 100%;
   overflow: scroll;
   position: relative;
   -webkit-overflow-scrolling: touch;

diff --git a/src/packages/__VUE/list/index.taro.vue b/src/packages/__VUE/list/index.taro.vue
@@ -2,7 +2,7 @@
   <scroll-view
     :class="classes"
     :scroll-y="true"
-    :style="{ height: containerHeight + 'px' }"
+    :style="{ height: `${getContainerHeight}px` }"
     scroll-top="0"
     @scroll="handleScrollEvent"
     ref="list"
@@ -20,6 +20,7 @@ import { reactive, toRefs, computed, ref, Ref, watch } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import Taro from '@tarojs/taro';
 const { componentName, create } = createComponent('list');
+const clientHeight = Taro.getSystemInfoSync().windowHeight;
 export default create({
   props: {
     height: {
@@ -34,7 +35,7 @@ export default create({
     },
     containerHeight: {
       type: [Number],
-      default: Taro.getSystemInfoSync().windowHeight || 667
+      default: clientHeight || 667
     }
   },
   emits: ['scroll', 'scroll-bottom'],
@@ -47,8 +48,12 @@ export default create({
       list: props.listData.slice()
     });
 
+    const getContainerHeight = computed(() => {
+      return Math.min(props.containerHeight, clientHeight);
+    });
+
     const visibleCount = computed(() => {
-      return Math.ceil(props.containerHeight / props.height);
+      return Math.ceil(getContainerHeight.value / props.height);
     });
 
     const end = computed(() => {
@@ -98,6 +103,7 @@ export default create({
       listHeight,
       visibleData,
       classes,
+      getContainerHeight,
       handleScrollEvent
     };
   }

diff --git a/src/packages/__VUE/list/index.vue b/src/packages/__VUE/list/index.vue
@@ -1,17 +1,18 @@
 <template>
-  <view :class="classes" @scroll.passive="handleScrollEvent" ref="list">
+  <div :class="classes" :style="{ height: `${getContainerHeight}px` }" @scroll.passive="handleScrollEvent" ref="list">
     <div class="nut-list-phantom" :style="{ height: listHeight + 'px' }"></div>
     <div class="nut-list-container" :style="{ transform: getTransform }">
       <div class="nut-list-item" :style="{ height: height + 'px' }" v-for="(item, index) in visibleData" :key="item">
         <slot :item="item" :index="index"></slot>
       </div>
     </div>
-  </view>
+  </div>
 </template>
 <script lang="ts">
 import { reactive, toRefs, computed, ref, Ref, watch } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { componentName, create } = createComponent('list');
+const clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
 export default create({
   props: {
     height: {
@@ -26,7 +27,7 @@ export default create({
     },
     containerHeight: {
       type: [Number],
-      default: document.documentElement.clientHeight || document.body.clientHeight || 667
+      default: clientHeight || 667
     }
   },
   emits: ['scroll', 'scroll-bottom'],
@@ -39,8 +40,12 @@ export default create({
       list: props.listData.slice()
     });
 
+    const getContainerHeight = computed(() => {
+      return Math.min(props.containerHeight, clientHeight);
+    });
+
     const visibleCount = computed(() => {
-      return Math.ceil(props.containerHeight / props.height);
+      return Math.ceil(getContainerHeight.value / props.height);
     });
 
     const end = computed(() => {
@@ -90,6 +95,7 @@ export default create({
       listHeight,
       visibleData,
       classes,
+      getContainerHeight,
       handleScrollEvent
     };
   }

diff --git a/src/sites/mobile-taro/vue/src/exhibition/pages/list/index.vue b/src/sites/mobile-taro/vue/src/exhibition/pages/list/index.vue
@@ -37,9 +37,6 @@ export default defineComponent({
 </script>
 <style lang="scss">
 .list-demo {
-  .nut-cell {
-    height: 100%;
-  }
   .list-item {
     display: flex;
     align-items: center;