浏览代码

feat(list): 虚拟列表增加列表高度可配置(#1199)

suzigang 3 年之前
父节点
当前提交
39bfe7373f

+ 3 - 2
src/packages/__VUE/list/doc.md

@@ -70,8 +70,9 @@ export default {
 
 | 参数         | 说明                             | 类型   | 默认值           |
 |--------------|----------------------------------|--------|------------------|
-| height         | 列表项的高度               | Number | 50                |
-| listData         | 列表数据               | any[] | []                |
+| height         | 列表项的高度               | Number | `50`                |
+| list-data         | 列表数据               | any[] | `[]`                |
+| container-height `v3.1.19`        | 容器高度              | Number | `可视区高度`                |
 
 ### Slot
 

+ 6 - 3
src/packages/__VUE/list/index.taro.vue

@@ -2,7 +2,7 @@
   <scroll-view
     :class="classes"
     :scroll-y="true"
-    :style="{ height: screenHeight + 'px' }"
+    :style="{ height: containerHeight + 'px' }"
     scroll-top="0"
     @scroll="handleScrollEvent"
     ref="list"
@@ -31,6 +31,10 @@ export default create({
       default: () => {
         return [];
       }
+    },
+    containerHeight: {
+      type: [Number],
+      default: Taro.getSystemInfoSync().windowHeight || 667
     }
   },
   emits: ['scroll'],
@@ -38,14 +42,13 @@ export default create({
   setup(props, { emit }) {
     const list = ref(null) as Ref;
     const state = reactive({
-      screenHeight: Taro.getSystemInfoSync().windowHeight,
       startOffset: 0,
       start: 0,
       list: props.listData.slice()
     });
 
     const visibleCount = computed(() => {
-      return Math.ceil(state.screenHeight / props.height);
+      return Math.ceil(props.containerHeight / props.height);
     });
 
     const end = computed(() => {

+ 5 - 2
src/packages/__VUE/list/index.vue

@@ -23,6 +23,10 @@ export default create({
       default: () => {
         return [];
       }
+    },
+    containerHeight: {
+      type: [Number],
+      default: document.documentElement.clientHeight || document.body.clientHeight || 667
     }
   },
   emits: ['scroll'],
@@ -30,14 +34,13 @@ export default create({
   setup(props, { emit }) {
     const list = ref(null) as Ref;
     const state = reactive({
-      screenHeight: document.documentElement.clientHeight || document.body.clientHeight || 667,
       startOffset: 0,
       start: 0,
       list: props.listData.slice()
     });
 
     const visibleCount = computed(() => {
-      return Math.ceil(state.screenHeight / props.height);
+      return Math.ceil(props.containerHeight / props.height);
     });
 
     const end = computed(() => {

+ 2 - 1
src/packages/__VUE/notify/__test__/notify.spec.ts

@@ -1,5 +1,6 @@
 import { mount } from '@vue/test-utils';
 import Notify from '../index.vue';
+import { nextTick } from 'vue';
 
 describe('Notify', () => {
   test('base notify', () => {
@@ -39,7 +40,7 @@ describe('Notify', () => {
         background: 'rgb(255, 225, 225)'
       }
     });
-    const notify = wrapper.find('.nut-notify').find('.nut-notify');
+    const notify = wrapper.find('.nut-popup').find('.nut-notify');
     expect((notify.element as HTMLElement).style.color).toBe('rgb(173, 0, 0)');
     expect((notify.element as HTMLElement).style.background).toBe('rgb(255, 225, 225)');
   });