feat: 滚动加载

src/config.json

@@ -15,7 +15,7 @@
             "chnName": "列表项",
             "type": "component",
             "showDemo": true,
-            "desc": "列表项，可组合成列表",
+            "desc": "列表项，可组合成列表,滚动加载",
             "author": "Frans、玉磊"
         },
         {
@@ -400,6 +400,17 @@
         },
         {
             "version": "1.0.0",
+            "name": "Infiniteloading",
+            "chnName": "无限加载",
+            "desc": "无限加载",
+            "type": "component",
+            "sort": "0",
+            "star": 4,
+            "showDemo": true,
+            "author": "iris、richard1015"
+        },
+        {
+            "version": "1.0.0",
             "name": "Menu",
             "sort": "3",
             "chnName": "菜单",

src/nutui.js

@@ -79,128 +79,130 @@ import ImagePreview from './packages/imagepreview/index.js';
 import './packages/imagepreview/imagepreview.scss';
 import Badge from './packages/badge/index.js';
 import './packages/badge/badge.scss';
-import Field from "./packages/field/index.js";
-import "./packages/field/field.scss";
-import Card from "./packages/card/index.js";
-import "./packages/card/card.scss";
-
+import Field from './packages/field/index.js';
+import './packages/field/field.scss';
+import Card from './packages/card/index.js';
+import './packages/card/card.scss';
+import Infiniteloading from './packages/infiniteloading/index.js';
+import './packages/infiniteloading/infiniteloading.scss';
 const packages = {
-    Cell,
-    Dialog,
-    Icon,
-    Toast,
-    ActionSheet,
-    Tab,
-    TabPanel,
-    TabBar,
-    Calendar,
-    DatePicker,
-    NavBar,
-    NoticeBar,
-    Switch,
-    Range,
-    Picker,
-    Col,
-    Row,
-    Steps,
-    Button,
-    Rate,
-    Stepper,
-    SearchBar,
-    Radio,
-    RadioGroup,
-    CheckBox,
-    Skeleton,
-    Uploader,
-    Avatar,
-    Popup,
-    LeftSlip,
-    TabSelect: TabSelect,
-    SideNavBar: SideNavBar,
-    SubSideNavBar: SubSideNavBar,
-    SideNavBarItem: SideNavBarItem,
-    Address: Address,
-    Tag,
-    Swiper,
-    Menu,
-    ImagePreview,
-    Badge,
-    Field: Field,
-    Card
+  Cell,
+  Dialog,
+  Icon,
+  Toast,
+  ActionSheet,
+  Tab,
+  TabPanel,
+  TabBar,
+  Calendar,
+  DatePicker,
+  NavBar,
+  NoticeBar,
+  Switch,
+  Range,
+  Picker,
+  Col,
+  Row,
+  Steps,
+  Button,
+  Rate,
+  Stepper,
+  SearchBar,
+  Radio,
+  RadioGroup,
+  CheckBox,
+  Skeleton,
+  Uploader,
+  Avatar,
+  Popup,
+  LeftSlip,
+  TabSelect: TabSelect,
+  SideNavBar: SideNavBar,
+  SubSideNavBar: SubSideNavBar,
+  SideNavBarItem: SideNavBarItem,
+  Address: Address,
+  Tag,
+  Swiper,
+  Menu,
+  ImagePreview,
+  Badge,
+  Field: Field,
+  Card,
+  Infiniteloading,
 };
 
 const components = {};
 const methods = {};
 const filters = {};
 const directives = {};
-pkgList.map(item => {
-    const pkg = packages[item.name];
-    if (!pkg) return;
+pkgList.map((item) => {
+  const pkg = packages[item.name];
+  if (!pkg) return;
 
-    if (item.type == 'component') {
-        if (pkg.name) {
-            components[pkg.name] = pkg;
-        } else {
-            for (let n in pkg) {
-                components[n] = pkg[n];
-            }
-        }
-    } else if (item.type == 'method') {
-        methods[item.name] = pkg;
-    } else if (item.type == 'filter') {
-        filters[item.name] = pkg;
-    } else if (item.type == 'directive') {
-        directives[item.name] = pkg;
+  if (item.type == 'component') {
+    if (pkg.name) {
+      components[pkg.name] = pkg;
+    } else {
+      for (let n in pkg) {
+        components[n] = pkg[n];
+      }
     }
+  } else if (item.type == 'method') {
+    methods[item.name] = pkg;
+  } else if (item.type == 'filter') {
+    filters[item.name] = pkg;
+  } else if (item.type == 'directive') {
+    directives[item.name] = pkg;
+  }
 });
 
-const install = function(Vue, opts = {}) {
-    if (install.installed) return;
+const install = function (Vue, opts = {}) {
+  if (install.installed) return;
 
-    if (opts.locale) {
-        Vue.config.lang = opts.locale;
-    }
+  if (opts.locale) {
+    Vue.config.lang = opts.locale;
+  }
 
-    if (opts.lang) locale(Vue.config.lang, opts.lang);
+  if (opts.lang) locale(Vue.config.lang, opts.lang);
 
-    for (let cptName in methods) {
-        if (Array.isArray(methods[cptName])) {
-            Vue.prototype['$' + cptName.toLowerCase()] = methods[cptName][0];
-            Vue.component(methods[cptName][1].name, methods[cptName][1]);
-        } else {
-            Vue.prototype['$' + cptName.toLowerCase()] = methods[cptName];
-        }
+  for (let cptName in methods) {
+    if (Array.isArray(methods[cptName])) {
+      Vue.prototype['$' + cptName.toLowerCase()] = methods[cptName][0];
+      Vue.component(methods[cptName][1].name, methods[cptName][1]);
+    } else {
+      Vue.prototype['$' + cptName.toLowerCase()] = methods[cptName];
     }
+  }
 
-    for (let cptName in components) {
-        if (components[cptName] && components[cptName].name) {
-            Vue.component(components[cptName].name, components[cptName]);
-        }
+  for (let cptName in components) {
+    if (components[cptName] && components[cptName].name) {
+      Vue.component(components[cptName].name, components[cptName]);
     }
+  }
 
-    for (let cptName in filters) {
-        if (filters[cptName] && filters[cptName].name) {
-            Vue.filter(cptName, filters[cptName]);
-        }
+  for (let cptName in filters) {
+    if (filters[cptName] && filters[cptName].name) {
+      Vue.filter(cptName, filters[cptName]);
     }
+  }
 
-    for (let cptName in directives) {
-        if (directives[cptName] && directives[cptName].name) {
-            Vue.directive(directives[cptName].name, directives[cptName]);
-        }
+  for (let cptName in directives) {
+    if (directives[cptName] && directives[cptName].name) {
+      Vue.directive(directives[cptName].name, directives[cptName]);
     }
+  }
 };
 
 if (typeof window !== 'undefined' && window.Vue) {
-    install(window.Vue);
+  install(window.Vue);
 }
 
 export default {
-    version,
-    locale,
-    install,
-    ...components,
-    ...filters,
-    ...directives,
-    ...methods
+  version,
+  locale,
+  install,
+  ...components,
+  ...filters,
+  ...directives,
+  ...methods,
 };

src/packages/infiniteloading/demo.vue

@@ -1,9 +1,19 @@
 <template>
-  <div>
+  <div class="demo-list">
     <nut-infiniteloading @loadmore="onInfinite" :is-show-mod="true" :has-more="isHasMore" :is-loading="isLoading" :threshold="200">
-      <ul class="list">
-        <li class="list-item" v-for="(item, index) of data" :key="item">我是测试数据{{ index + 1 }}</li>
-      </ul>
+      <div class="list">
+        <nut-cell v-for="(item, index) of data" :key="item" :title="'噜啦噜' + index" sub-title="我又来送福利啦！关注之后你就会">
+          <div slot="avatar">
+            <nut-avatar sizeNum="60" :bg-image="require('../../assets/img/cell-avatar.jpeg')" bg-icon></nut-avatar>
+          </div>
+          <div slot="desc">
+            <p class="timer">10:12</p>
+            <p class="badge">
+              <nut-badge :value="9" :max="99" top="0px" right="15px"></nut-badge>
+            </p>
+          </div>
+        </nut-cell>
+      </div>
     </nut-infiniteloading>
   </div>
 </template>
@@ -43,17 +53,15 @@ export default {
 
 <style lang="scss" scoped>
 .list {
-  padding-top: 10px;
+  .timer {
+    color: #c8c8c8ff;
+  }
 
-  .list-item {
-    height: 50px;
-    border: 1px solid mix($primary-color, #fff, 40%);
-    margin-bottom: 10px;
-    font-size: 12px;
-    color: mix($primary-color, #fff, 80%);
-    line-height: 50px;
-    text-align: center;
-    background-color: #fff;
+  .badge {
+    .nut-badge {
+      width: 100%;
+      height: 100%;
+    }
   }
 }
 </style>

src/packages/infiniteloading/doc.md

@@ -4,20 +4,21 @@
 ## 基本用法
 
 ```html
-<nut-infiniteloading 
-    @loadmore="onInfinite" 
-    :is-show-mod="true" 
-    :has-more="isHasMore" 
-    :is-loading="isLoading" 
-    :threshold="200"
->
-    <ul class="list" >
-        <li 
-            class="list-item" 
-            v-for="(item, index) of data" 
-            :key="item"
-        >我是测试数据{{index + 1} }</li>
-    </ul>
+<nut-infiniteloading @loadmore="onInfinite" :is-show-mod="true" :has-more="isHasMore" :is-loading="isLoading"
+    :threshold="200">
+    <div class="list">
+    <nut-cell v-for="(item, index) of data" :key="item" :title="'噜啦噜'+index" sub-title="我又来送福利啦！关注之后你就会">
+        <div slot="avatar">
+        <nut-avatar sizeNum="60" :bg-image="require('../../assets/img/cell-avatar.jpeg')" bg-icon></nut-avatar>
+        </div>
+        <div slot="desc">
+        <p class="timer">10:12</p>
+        <p class="badge">
+            <nut-badge :value="9" :max="99" top="0px" right="15px"></nut-badge>
+        </p>
+        </div>
+    </nut-cell>
+    </div>
 </nut-infiniteloading>
 ```
 ```javascript