Merge branch 'next' of https://github.com/jdf2e/nutui into next

mikasayw · Feb 24, 2023 · 62a209e · 62a209e
2 parents c487fd5 + 74bdbe3
commit 62a209e
Show file tree

Hide file tree

Showing 7 changed files with 417 additions and 86 deletions.
diff --git a/src/packages/__VUE/list/demo.vue b/src/packages/__VUE/list/demo.vue
@@ -2,10 +2,10 @@
   <div class="demo">
     <h2>{{ translate('basic') }}</h2>
     <nut-cell>
-      <nut-list :height="50" :listData="count" @scroll-bottom="handleScroll">
-        <template v-slot="{ item }">
+      <nut-list :listData="count" @scroll-bottom="handleScroll">
+        <template v-slot="{ item, index }">
           <div class="list-item">
-            {{ item }}
+            {{ index }}
           </div>
         </template>
       </nut-list>
@@ -48,18 +48,18 @@ export default createDemo({
   }
 });
 </script>
-<style lang="scss" scoped>
+<style lang="scss">
 .demo {
   .nut-cell {
     height: 100%;
   }
-  .list-item {
+  .nut-list-item {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
-    height: 50px;
     margin-bottom: 10px;
+    height: 50px;
     background-color: #f4a8b6;
     border-radius: 10px;
   }

diff --git a/src/packages/__VUE/list/doc.en-US.md b/src/packages/__VUE/list/doc.en-US.md
@@ -27,10 +27,10 @@ app.use();
   <div class="demo">
     <h2>Basic Usage</h2>
     <nut-cell>
-      <nut-list :height="50" :listData="count" @scroll-bottom="handleScroll">
-        <template v-slot="{ item }">
+      <nut-list :listData="count" @scroll-bottom="handleScroll">
+        <template v-slot="{ item. index }">
           <div class="list-item">
-            {{ item }}
+            {{ index }}
           </div>
         </template>
       </nut-list>
@@ -70,17 +70,16 @@ body {
   height: 100%;
 }
 .demo {
-  height: 100%;
   .nut-cell {
     height: 100%;
   }
-  .list-item {
+  .nut-list-item {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
-    height: 50px;
     margin-bottom: 10px;
+    height: 50px;
     background-color: #f4a8b6;
     border-radius: 10px;
   }
@@ -96,9 +95,11 @@ body {
 
 | Attribute         | Description                             | Type   | Default           |
 |--------------|----------------------------------|--------|------------------|
-| height         | The height of the list item               | Number | `50`                |
+| height         | The height/estimated height of the list item, supports unfixed height    | Number | `80`                |
 | list-data         | List data               | any[] | `[]`                |
 | container-height `v3.1.19`        | Container height(The maximum value cannot exceed the viewable area)              | Number | `Visual area height`                |
+| buffer-size `v3.3.5`        | data buffer length              | Number | `5`                |
+| margin `v3.3.5`        | The gap between the lists is consistent with the custom style         | Number | `10`                |
 
 ### Slots
 
@@ -111,5 +112,6 @@ body {
 
 | Event | Description           | Arguments     |
 |--------|----------------|--------------|
-| scroll(Will be abandoned), `scroll-bottom` replaced  | Triggered when scrolling to the bottom | - |
-| scroll-bottom `v3.1.21`   | Triggered when scrolling to the bottom | - |
+| scroll-bottom `v3.1.21`   | Triggered when scrolling to the bottom | - |
+| scroll-up `v3.3.5`   | scroll up | - |
+| scroll-down `v3.3.5`   | scroll down | - |
diff --git a/src/packages/__VUE/list/doc.md b/src/packages/__VUE/list/doc.md
@@ -28,9 +28,9 @@ app.use();
     <h2>基础用法</h2>
     <nut-cell>
       <nut-list :height="50" :listData="count" @scroll-bottom="handleScroll">
-        <template v-slot="{ item }">
+        <template v-slot="{ item, index }">
           <div class="list-item">
-            {{ item }}
+            {{ index }}
           </div>
         </template>
       </nut-list>
@@ -70,11 +70,10 @@ body {
   height: 100%;
 }
 .demo {
-  height: 100%;
   .nut-cell {
     height: 100%;
   }
-  .list-item {
+  .nut-list-item {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -96,20 +95,23 @@ body {
 
 | 参数         | 说明                             | 类型   | 默认值           |
 |--------------|----------------------------------|--------|------------------|
-| height         | 列表项的高度               | Number | `50`                |
+| height         | 列表项的高度/预估高度，支持不固定高度               | Number | `80`                |
 | list-data         | 列表数据               | any[] | `[]`                |
 | container-height `v3.1.19`        | 容器高度(最大值不能超过可视区)              | Number | `可视区高度`                |
+| buffer-size `v3.3.5`        | 数据缓冲区长度              | Number | `5`                |
+| margin `v3.3.5`        | 列表之间的间隙，和自定义样式保持一致         | Number | `10`                |
 
 ### Slots
 
 | 参数         | 说明                             | 类型   |
 |--------------|----------------------------------|--------|
 | item         | 列表项数据               | Object |
-| index         | 索引               | Number |
+| index         | 列表索引               | Number |
 
 ### Events
 
 | 事件名 | 说明           | 回调参数     |
 |--------|----------------|--------------|
-| scroll(将被废弃), `scroll-bottom` 代替 | 滚动到底部时触发 | - |
-| scroll-bottom `v3.1.21`   | 滚动到底部时触发 | - |
+| scroll-bottom `v3.1.21`   | 滚动到底部时触发 | - |
+| scroll-up `v3.3.5`   | 向上滚动 | - |
+| scroll-down `v3.3.5`   | 向下滚动 | - |
diff --git a/src/packages/__VUE/list/index.scss b/src/packages/__VUE/list/index.scss
@@ -1,23 +1,23 @@
 .nut-list {
   width: 100%;
-  overflow: scroll;
   position: relative;
+  overflow-x: hidden;
+  overflow-y: auto;
   -webkit-overflow-scrolling: touch;
+
   &-phantom {
-    position: absolute;
-    left: 0;
-    top: 0;
-    right: 0;
+    position: relative;
     z-index: -1;
   }
+
   &-container {
+    position: absolute;
+    top: 0;
     left: 0;
     right: 0;
-    top: 0;
-    position: absolute;
   }
+
   &-item {
     overflow: hidden;
-    margin: $list-item-margin;
   }
 }