Browse Source

fix(list): taro e.detail error(#1171 #1284)

suzigang 3 years ago
parent
commit
468ad0f0af

+ 1 - 1
src/packages/__VUE/list/demo.vue

@@ -2,7 +2,7 @@
   <div class="demo">
     <h2>{{ translate('basic') }}</h2>
     <nut-cell>
-      <nut-list :height="50" :listData="count" @scroll="handleScroll">
+      <nut-list :height="50" :listData="count" @scroll-bottom="handleScroll">
         <template v-slot="{ item }">
           <div class="list-item">
             {{ item }}

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

@@ -27,7 +27,7 @@ app.use();
   <div class="demo">
     <h2>Basic Usage</h2>
     <nut-cell>
-      <nut-list :height="50" :listData="count" @scroll="handleScroll">
+      <nut-list :height="50" :listData="count" @scroll-bottom="handleScroll">
         <template v-slot="{ item }">
           <div class="list-item">
             {{ item }}
@@ -85,4 +85,5 @@ export default {
 
 | Event | Description           | Arguments     |
 |--------|----------------|--------------|
-| scroll  | Triggered when scrolling | - |
+| scroll(Will be abandoned), `scroll-bottom` replaced  | Triggered when scrolling to the bottom | - |
+| scroll-bottom `v3.1.21`   | Triggered when scrolling to the bottom | - |

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

@@ -27,7 +27,7 @@ app.use();
   <div class="demo">
     <h2>基础用法</h2>
     <nut-cell>
-      <nut-list :height="50" :listData="count" @scroll="handleScroll">
+      <nut-list :height="50" :listData="count" @scroll-bottom="handleScroll">
         <template v-slot="{ item }">
           <div class="list-item">
             {{ item }}
@@ -85,4 +85,5 @@ export default {
 
 | 事件名 | 说明           | 回调参数     |
 |--------|----------------|--------------|
-| scroll  | 滚动时触发 | - |
+| scroll(将被废弃), `scroll-bottom` 代替 | 滚动到底部时触发 | - |
+| scroll-bottom `v3.1.21`   | 滚动到底部时触发 | - |

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

@@ -37,7 +37,7 @@ export default create({
       default: Taro.getSystemInfoSync().windowHeight || 667
     }
   },
-  emits: ['scroll'],
+  emits: ['scroll', 'scroll-bottom'],
 
   setup(props, { emit }) {
     const list = ref(null) as Ref;
@@ -75,10 +75,11 @@ export default create({
     });
 
     const handleScrollEvent = async (e: any) => {
-      const scrollTop = e.detail.scrollTop;
+      const scrollTop = e.detail ? e.detail.scrollTop : e.target.scrollTop;
       state.start = Math.floor(scrollTop / props.height);
       if (end.value > state.list.length) {
         emit('scroll');
+        emit('scroll-bottom');
       }
       state.startOffset = scrollTop - (scrollTop % props.height);
     };

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

@@ -29,7 +29,7 @@ export default create({
       default: document.documentElement.clientHeight || document.body.clientHeight || 667
     }
   },
-  emits: ['scroll'],
+  emits: ['scroll', 'scroll-bottom'],
 
   setup(props, { emit }) {
     const list = ref(null) as Ref;
@@ -71,6 +71,7 @@ export default create({
       state.start = Math.floor(scrollTop / props.height);
       if (end.value > state.list.length) {
         emit('scroll');
+        emit('scroll-bottom');
       }
       state.startOffset = scrollTop - (scrollTop % props.height);
     };

+ 1 - 1
src/sites/mobile-taro/vue/src/exhibition/pages/list/index.vue

@@ -2,7 +2,7 @@
   <div class="demo list-demo">
     <h2>基础用法</h2>
     <nut-cell>
-      <nut-list :height="50" :listData="count" @scroll="handleScroll">
+      <nut-list :height="50" :listData="count" @scroll-bottom="handleScroll">
         <template v-slot="{ item }">
           <div class="list-item">
             {{ item }}