feat: infiniteloading

src/packages/__VUE/infiniteloading/demo.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="demo">
+  <div class="demo nut-infiniteloading-demo">
     <nut-tabs v-model="tabsValue" animatedTime="0" @change="chagetabs">
       <nut-tab-pane :title="translate('basic')">
         <ul class="infiniteUl">
@@ -145,39 +145,45 @@ export default createDemo({
 });
 </script>
 
-<style lang="scss" scoped>
-.demo {
-  padding-left: 0px !important;
-  padding-right: 0px !important;
-}
-.nut-theme-dark {
-  .infiniteLi {
-    color: $dark-color;
+<style lang="scss">
+.nut-infiniteloading-demo {
+  .nut-theme-dark {
+    .infiniteLi {
+      color: $dark-color;
+    }
   }
-}
 
-.nut-tab-pane {
-  padding: 0 !important;
-  padding-left: 16px !important;
-}
-.infiniteUl {
-  width: 100%;
-  height: calc(100vh - 120px);
-  padding: 0;
-  margin: 0;
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-.infiniteLi {
-  font-size: 14px;
-  color: #333;
-  padding: 12px 0;
-  border-bottom: 1px solid #eee;
-}
+  .nut-tabs__titles {
+    background: #fff !important;
+    box-shadow: 0px 4px 10px 0px rgb(0 0 0 / 7%);
+    margin-top: 10px;
+    margin-bottom: 3px;
+    z-index: 99;
+  }
 
-.loading {
-  display: block;
-  width: 100%;
-  text-align: center;
+  .nut-tab-pane {
+    padding: 0 !important;
+    padding-left: 16px !important;
+  }
+  .infiniteUl {
+    width: 100%;
+    height: calc(100vh - 120px);
+    padding: 0;
+    margin: 0;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+  .infiniteLi {
+    font-size: 14px;
+    color: #333;
+    padding: 12px 0;
+    border-bottom: 1px solid #eee;
+  }
+
+  .loading {
+    display: block;
+    width: 100%;
+    text-align: center;
+  }
 }
 </style>

src/packages/__VUE/infiniteloading/doc.en-US.md

@@ -8,11 +8,10 @@ Scrolling to the bottom of the list automatically loads more data.
 
 ```javascript
   import { createApp } from 'vue';
-  import { InfiniteLoading,Icon } from '@nutui/nutui';
+  import { InfiniteLoading } from '@nutui/nutui';
 
   const app = createApp();
   app.use(InfiniteLoading);
-  app.use(Icon);
 ```
 
 ### Basic Usage
@@ -108,7 +107,6 @@ Scrolling to the bottom of the list automatically loads more data.
 | threshold        | The loadMore event will be Emitted when the distance between the scrollbar and the bottom is less than threshold   | Number  | `200`            |
 | use-capture      | Whether to use capture mode                                                                                        | Boolean | `false`          |
 | load-more-txt    | "No more" text                                                                                                     | String  | 'Oops, this is the bottom'|
-| load-icon        | Pull on loading[图标名称](#/zh-CN/component/icon)                                                                                    | String | ''    |
 | load-txt         | Pull on loading text                                                                                                | String  | `Loading...`      |
 
 ### Events
@@ -122,5 +120,7 @@ Scrolling to the bottom of the list automatically loads more data.
 
 | Attribute | Description  | 
 |--------|----------------|
+| default  | Custom content |
 | loading  | Loading text |
+| loadingIcon  | Custom loading icon |
 | finished  | Finished text |

src/packages/__VUE/infiniteloading/doc.md

@@ -8,11 +8,10 @@
 
 ```javascript
   import { createApp } from 'vue';
-  import { InfiniteLoading,Icon } from '@nutui/nutui';
+  import { InfiniteLoading } from '@nutui/nutui';
 
   const app = createApp();
   app.use(InfiniteLoading);
-  app.use(Icon);
 
 ```
 
@@ -110,7 +109,6 @@
 | threshold         | 滚动条与底部距离小于 threshold 时触发 loadMore 事件 | Number | `200`               |
 | use-capture          | 是否使用捕获模式 true 捕获 false 冒泡                        | Boolean | `false`            |
 | load-more-txt          | “没有更多数”据展示文案                        | String | `'哎呀，这里是底部了啦'`            |
-| load-icon        | 上拉加载[图标名称](#/zh-CN/component/icon)                       | String | ''             |
 | load-txt        | 上拉加载提示文案                         | String | `加载中...`                |
 
 ### Events
@@ -124,5 +122,7 @@
 
 | 名称 | 说明           | 
 |--------|----------------|
+| default  | 自定义加载内容 |
 | loading  | 自定义底部加载中提示 |
+| loadingIcon  | 自定义底部加载中图标 |
 | finished  | 自定义加载完成后的提示文案 |

src/packages/__VUE/infiniteloading/index.scss

@@ -24,10 +24,13 @@
     text-align: center;
 
     .nut-infinite__bottom-box {
+      display: flex;
+      align-items: center;
+      justify-content: center;
       &__img {
         margin-right: 5px;
-        width: 28px;
-        height: 24px;
+        width: 15px;
+        height: 15px;
       }
       &__text {
         font-size: 12px;

src/packages/__VUE/infiniteloading/index.vue

@@ -8,7 +8,7 @@
       <template v-if="isInfiniting">
         <view class="nut-infinite__bottom-box">
           <slot name="loading">
-            <nut-icon v-if="loadIcon" class="nut-infinite__bottom-box__img" v-bind="$attrs" :name="loadIcon"></nut-icon>
+            <slot name="loadIcon"><Loading class="nut-icon-loading nut-infinite__bottom-box__img"></Loading></slot>
             <view class="nut-infinite__bottom-box__text">{{ loadTxt || translate('loading') }}</view>
           </slot>
         </view>
@@ -39,6 +39,7 @@ const { componentName, create, translate } = createComponent('infinite-loading')
 import { useScrollParent } from '@/packages/utils/useScrollParent';
 import requestAniFrame from '@/packages/utils/raf';
 import { getScrollTopRoot } from '@/packages/utils/util';
+import { Loading } from '@nutui/icons-vue';
 
 export default create({
   props: {
@@ -54,10 +55,6 @@ export default create({
       type: Number,
       default: 200
     },
-    loadIcon: {
-      type: String,
-      default: ''
-    },
     loadTxt: {
       type: String,
       default: ''
@@ -80,7 +77,9 @@ export default create({
     }
   },
   emits: ['scroll-change', 'load-more', 'update:modelValue'],
-
+  components: {
+    Loading
+  },
   setup(props, { emit, slots }) {
     const scroller = ref<HTMLElement>();
     const scrollParent = useScrollParent(scroller);