feat: 创建infinite

src/sites/mobile-taro/vue/dist/app.json

@@ -1 +1 @@
-{"pages":["pages/button/demo","pages/address/demo"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor":"#fff","navigationBarTitleText":"WeChat","navigationBarTextStyle":"black"}}
+{"pages":["pages/button/demo","pages/address/demo","pages/infiniteloading/demo"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor":"#fff","navigationBarTitleText":"WeChat","navigationBarTextStyle":"black"}}

src/sites/mobile-taro/vue/dist/pages/address/demo.js

@@ -4147,77 +4147,6 @@
         /***/
       },
 
-    /***/ './node_modules/@babel/runtime/helpers/esm/objectSpread2.js':
-      /*!******************************************************************!*\
-  !*** ./node_modules/@babel/runtime/helpers/esm/objectSpread2.js ***!
-  \******************************************************************/
-      /*! exports provided: default */
-      /*! exports used: default */
-      /***/ function(module, __webpack_exports__, __webpack_require__) {
-        'use strict';
-        /* harmony export (binding) */ __webpack_require__.d(
-          __webpack_exports__,
-          'a',
-          function() {
-            return _objectSpread2;
-          }
-        );
-        /* harmony import */ var _defineProperty_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(
-          /*! ./defineProperty.js */ './node_modules/@babel/runtime/helpers/esm/defineProperty.js'
-        );
-
-        function ownKeys(object, enumerableOnly) {
-          var keys = Object.keys(object);
-
-          if (Object.getOwnPropertySymbols) {
-            var symbols = Object.getOwnPropertySymbols(object);
-
-            if (enumerableOnly) {
-              symbols = symbols.filter(function(sym) {
-                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-              });
-            }
-
-            keys.push.apply(keys, symbols);
-          }
-
-          return keys;
-        }
-
-        function _objectSpread2(target) {
-          for (var i = 1; i < arguments.length; i++) {
-            var source = arguments[i] != null ? arguments[i] : {};
-
-            if (i % 2) {
-              ownKeys(Object(source), true).forEach(function(key) {
-                Object(
-                  _defineProperty_js__WEBPACK_IMPORTED_MODULE_0__[
-                    /* default */ 'a'
-                  ]
-                )(target, key, source[key]);
-              });
-            } else if (Object.getOwnPropertyDescriptors) {
-              Object.defineProperties(
-                target,
-                Object.getOwnPropertyDescriptors(source)
-              );
-            } else {
-              ownKeys(Object(source)).forEach(function(key) {
-                Object.defineProperty(
-                  target,
-                  key,
-                  Object.getOwnPropertyDescriptor(source, key)
-                );
-              });
-            }
-          }
-
-          return target;
-        }
-
-        /***/
-      },
-
     /***/ './node_modules/@tarojs/taro-loader/lib/raw.js!./src/pages/address/demo.vue':
       /*!**********************************************************************************!*\
   !*** ./node_modules/@tarojs/taro-loader/lib/raw.js!./src/pages/address/demo.vue ***!

src/sites/mobile-taro/vue/dist/pages/infiniteloading/demo.json

@@ -0,0 +1 @@
+{"usingComponents":{"custom-wrapper":"../../custom-wrapper","comp":"../../comp"}}

src/sites/mobile-taro/vue/dist/pages/infiniteloading/demo.wxml

@@ -0,0 +1,2 @@
+<import src="../../base.wxml"/>
+<template is="taro_tmpl" data="{{root:root}}" />

src/sites/mobile-taro/vue/dist/pages/infiniteloading/demo.wxss

@@ -0,0 +1,315 @@
+view-block[data-v-355c0724] {
+  display: block;
+}
+@-webkit-keyframes nutFadeIn-355c0724 {
+from {
+    opacity: 0;
+}
+to {
+    opacity: 1;
+}
+}
+@keyframes nutFadeIn-355c0724 {
+from {
+    opacity: 0;
+}
+to {
+    opacity: 1;
+}
+}
+@-webkit-keyframes nutFadeOut-355c0724 {
+from {
+    opacity: 1;
+}
+to {
+    opacity: 0;
+}
+}
+@keyframes nutFadeOut-355c0724 {
+from {
+    opacity: 1;
+}
+to {
+    opacity: 0;
+}
+}
+.nutFade-enter-active[data-v-355c0724],
+.nutFadeIn[data-v-355c0724],
+.nutFade-leave-active[data-v-355c0724],
+.nutFadeOut[data-v-355c0724] {
+  -webkit-animation-duration: 0.25s;
+          animation-duration: 0.25s;
+  -webkit-animation-fill-mode: both;
+          animation-fill-mode: both;
+  -webkit-animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+          animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+}
+.nutFade-enter-active[data-v-355c0724],
+.nutFadeIn[data-v-355c0724] {
+  -webkit-animation-name: nutFadeIn-355c0724;
+          animation-name: nutFadeIn-355c0724;
+}
+.nutFade-leave-active[data-v-355c0724],
+.nutFadeOut[data-v-355c0724] {
+  -webkit-animation-name: nutFadeOut-355c0724;
+          animation-name: nutFadeOut-355c0724;
+}
+@-webkit-keyframes nutZoomIn-355c0724 {
+from {
+    opacity: 0;
+    -webkit-transform: scale3d(0.3, 0.3, 0.3);
+            transform: scale3d(0.3, 0.3, 0.3);
+}
+50% {
+    opacity: 1;
+}
+}
+@keyframes nutZoomIn-355c0724 {
+from {
+    opacity: 0;
+    -webkit-transform: scale3d(0.3, 0.3, 0.3);
+            transform: scale3d(0.3, 0.3, 0.3);
+}
+50% {
+    opacity: 1;
+}
+}
+@-webkit-keyframes nutZoomOut-355c0724 {
+from {
+    opacity: 1;
+}
+50% {
+    opacity: 0;
+    -webkit-transform: scale3d(0.3, 0.3, 0.3);
+            transform: scale3d(0.3, 0.3, 0.3);
+}
+to {
+    opacity: 0;
+}
+}
+@keyframes nutZoomOut-355c0724 {
+from {
+    opacity: 1;
+}
+50% {
+    opacity: 0;
+    -webkit-transform: scale3d(0.3, 0.3, 0.3);
+            transform: scale3d(0.3, 0.3, 0.3);
+}
+to {
+    opacity: 0;
+}
+}
+.nutZoom-enter-active[data-v-355c0724],
+.nutZoomIn[data-v-355c0724],
+.nutZoom-leave-active[data-v-355c0724],
+.nutZoomOut[data-v-355c0724] {
+  -webkit-animation-duration: 0.25s;
+          animation-duration: 0.25s;
+  -webkit-animation-fill-mode: both;
+          animation-fill-mode: both;
+  -webkit-animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+          animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+}
+.nutZoom-enter-active[data-v-355c0724],
+.nutZoomIn[data-v-355c0724] {
+  -webkit-animation-name: nutZoomIn-355c0724;
+          animation-name: nutZoomIn-355c0724;
+}
+.nutZoom-leave-active[data-v-355c0724],
+.nutZoomOut[data-v-355c0724] {
+  -webkit-animation-name: nutZoomOut-355c0724;
+          animation-name: nutZoomOut-355c0724;
+}
+@-webkit-keyframes nutEaseIn-355c0724 {
+0% {
+    opacity: 0;
+    -webkit-transform: scale(0.9);
+            transform: scale(0.9);
+}
+100% {
+    opacity: 1;
+    -webkit-transform: scale(1);
+            transform: scale(1);
+}
+}
+@keyframes nutEaseIn-355c0724 {
+0% {
+    opacity: 0;
+    -webkit-transform: scale(0.9);
+            transform: scale(0.9);
+}
+100% {
+    opacity: 1;
+    -webkit-transform: scale(1);
+            transform: scale(1);
+}
+}
+@-webkit-keyframes nutEaseOut-355c0724 {
+0% {
+    opacity: 1;
+    -webkit-transform: scale(1);
+            transform: scale(1);
+}
+100% {
+    opacity: 0;
+    -webkit-transform: scale(0.9);
+            transform: scale(0.9);
+}
+}
+@keyframes nutEaseOut-355c0724 {
+0% {
+    opacity: 1;
+    -webkit-transform: scale(1);
+            transform: scale(1);
+}
+100% {
+    opacity: 0;
+    -webkit-transform: scale(0.9);
+            transform: scale(0.9);
+}
+}
+.nutEase-enter-active[data-v-355c0724],
+.nutEaseIn[data-v-355c0724],
+.nutEase-leave-active[data-v-355c0724],
+.nutEaseOut[data-v-355c0724] {
+  -webkit-animation-duration: 0.25s;
+          animation-duration: 0.25s;
+  -webkit-animation-fill-mode: both;
+          animation-fill-mode: both;
+  -webkit-animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+          animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+}
+.nutEase-enter-active[data-v-355c0724],
+.nutEaseIn[data-v-355c0724] {
+  -webkit-animation-name: nutEaseIn-355c0724;
+          animation-name: nutEaseIn-355c0724;
+}
+.nutEase-leave-active[data-v-355c0724],
+.nutEaseOut[data-v-355c0724] {
+  -webkit-animation-name: nutEaseOut-355c0724;
+          animation-name: nutEaseOut-355c0724;
+}
+@-webkit-keyframes nutDropIn-355c0724 {
+0% {
+    opacity: 0;
+    -webkit-transform: scaleY(0.8);
+            transform: scaleY(0.8);
+}
+100% {
+    opacity: 1;
+    -webkit-transform: scaleY(1);
+            transform: scaleY(1);
+}
+}
+@keyframes nutDropIn-355c0724 {
+0% {
+    opacity: 0;
+    -webkit-transform: scaleY(0.8);
+            transform: scaleY(0.8);
+}
+100% {
+    opacity: 1;
+    -webkit-transform: scaleY(1);
+            transform: scaleY(1);
+}
+}
+@-webkit-keyframes nutDropOut-355c0724 {
+0% {
+    opacity: 1;
+    -webkit-transform: scaleY(1);
+            transform: scaleY(1);
+}
+100% {
+    opacity: 0;
+    -webkit-transform: scaleY(0.8);
+            transform: scaleY(0.8);
+}
+}
+@keyframes nutDropOut-355c0724 {
+0% {
+    opacity: 1;
+    -webkit-transform: scaleY(1);
+            transform: scaleY(1);
+}
+100% {
+    opacity: 0;
+    -webkit-transform: scaleY(0.8);
+            transform: scaleY(0.8);
+}
+}
+.nutDrop-enter-active[data-v-355c0724],
+.nutDropIn[data-v-355c0724],
+.nutDrop-leave-active[data-v-355c0724],
+.nutDropOut[data-v-355c0724] {
+  -webkit-animation-duration: 0.25s;
+          animation-duration: 0.25s;
+  -webkit-animation-fill-mode: both;
+          animation-fill-mode: both;
+  -webkit-animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+          animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+}
+.nutDrop-enter-active[data-v-355c0724],
+.nutDropIn[data-v-355c0724] {
+  -webkit-animation-name: nutDropIn-355c0724;
+          animation-name: nutDropIn-355c0724;
+}
+.nutDrop-leave-active[data-v-355c0724],
+.nutDropOut[data-v-355c0724] {
+  -webkit-animation-name: nutDropOut-355c0724;
+          animation-name: nutDropOut-355c0724;
+}
+@-webkit-keyframes rotation-355c0724 {
+0% {
+    -webkit-transform: rotate(0deg);
+}
+100% {
+    -webkit-transform: rotate(360deg);
+}
+}
+@keyframes rotation-355c0724 {
+0% {
+    -webkit-transform: rotate(0deg);
+}
+100% {
+    -webkit-transform: rotate(360deg);
+}
+}
+.nutRotate-enter-active[data-v-355c0724],
+.nutRotateIn[data-v-355c0724],
+.nutRotate-leave-active[data-v-355c0724],
+.nutRotateOut[data-v-355c0724] {
+  -webkit-animation-duration: 0.25s;
+          animation-duration: 0.25s;
+  -webkit-animation-fill-mode: both;
+          animation-fill-mode: both;
+  -webkit-animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+          animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+}
+.nutRotate-enter-active[data-v-355c0724],
+.nutRotateIn[data-v-355c0724] {
+  -webkit-animation-name: nutRotateIn;
+          animation-name: nutRotateIn;
+}
+.nutRotate-leave-active[data-v-355c0724],
+.nutRotateOut[data-v-355c0724] {
+  -webkit-animation-name: nutRotateOut;
+          animation-name: nutRotateOut;
+}
+.infiniteUl[data-v-355c0724] {
+  height: 600rpx;
+  width: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+.infiniteLi[data-v-355c0724] {
+  margin-top: 20rpx;
+  font-size: 28rpx;
+  color: #646464;
+  text-align: center;
+}
+.loading[data-v-355c0724] {
+  display: block;
+  width: 100%;
+  text-align: center;
+}

src/sites/mobile-taro/vue/dist/vendors.js

@@ -13129,6 +13129,77 @@ return withDirectives(h(comp), [
         /***/
       },
 
+    /***/ './node_modules/@babel/runtime/helpers/esm/objectSpread2.js':
+      /*!******************************************************************!*\
+  !*** ./node_modules/@babel/runtime/helpers/esm/objectSpread2.js ***!
+  \******************************************************************/
+      /*! exports provided: default */
+      /*! exports used: default */
+      /***/ function(module, __webpack_exports__, __webpack_require__) {
+        'use strict';
+        /* harmony export (binding) */ __webpack_require__.d(
+          __webpack_exports__,
+          'a',
+          function() {
+            return _objectSpread2;
+          }
+        );
+        /* harmony import */ var _defineProperty_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(
+          /*! ./defineProperty.js */ './node_modules/@babel/runtime/helpers/esm/defineProperty.js'
+        );
+
+        function ownKeys(object, enumerableOnly) {
+          var keys = Object.keys(object);
+
+          if (Object.getOwnPropertySymbols) {
+            var symbols = Object.getOwnPropertySymbols(object);
+
+            if (enumerableOnly) {
+              symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+              });
+            }
+
+            keys.push.apply(keys, symbols);
+          }
+
+          return keys;
+        }
+
+        function _objectSpread2(target) {
+          for (var i = 1; i < arguments.length; i++) {
+            var source = arguments[i] != null ? arguments[i] : {};
+
+            if (i % 2) {
+              ownKeys(Object(source), true).forEach(function(key) {
+                Object(
+                  _defineProperty_js__WEBPACK_IMPORTED_MODULE_0__[
+                    /* default */ 'a'
+                  ]
+                )(target, key, source[key]);
+              });
+            } else if (Object.getOwnPropertyDescriptors) {
+              Object.defineProperties(
+                target,
+                Object.getOwnPropertyDescriptors(source)
+              );
+            } else {
+              ownKeys(Object(source)).forEach(function(key) {
+                Object.defineProperty(
+                  target,
+                  key,
+                  Object.getOwnPropertyDescriptor(source, key)
+                );
+              });
+            }
+          }
+
+          return target;
+        }
+
+        /***/
+      },
+
     /***/ './node_modules/@babel/runtime/helpers/esm/possibleConstructorReturn.js':
       /*!******************************************************************************!*\
   !*** ./node_modules/@babel/runtime/helpers/esm/possibleConstructorReturn.js ***!

src/sites/mobile-taro/vue/project.private.config.json

@@ -1,4 +1,5 @@
 {
+  "setting": {},
   "condition": {
     "plugin": {
       "list": []
@@ -16,6 +17,12 @@
           "pathName": "pages/address/demo",
           "query": "",
           "scene": null
+        },
+        {
+          "name": "pages/infiniteloading/demo",
+          "pathName": "pages/infiniteloading/demo",
+          "query": "",
+          "scene": null
         }
       ]
     }

src/sites/mobile-taro/vue/src/app.config.ts

@@ -2,7 +2,8 @@ export default {
   pages: [
     // 'pages/inputnumber/demo',
     'pages/button/demo',
-    'pages/address/demo'
+    'pages/address/demo',
+    'pages/infiniteloading/demo'
   ],
   window: {
     backgroundTextStyle: 'light',

src/sites/mobile-taro/vue/src/pages/infiniteloading/demo.vue

@@ -0,0 +1,172 @@
+<template>
+  <view class="demo">
+    <h2>基础用法</h2>
+    <nut-cell>
+      <ul class="infiniteUl" id="scroll">
+        <nut-infiniteloading
+          container-id="scroll"
+          :use-window="false"
+          :has-more="hasMore"
+          @load-more="loadMore"
+        >
+          <li
+            class="infiniteLi"
+            v-for="(item, index) in defultList"
+            :key="index"
+            >{{ item }}</li
+          >
+        </nut-infiniteloading>
+      </ul>
+    </nut-cell>
+
+    <h2>下拉刷新</h2>
+    <nut-cell>
+      <ul class="infiniteUl" id="refreshScroll">
+        <nut-infiniteloading
+          pull-icon="JD"
+          container-id="refreshScroll"
+          :use-window="false"
+          :is-open-refresh="true"
+          :has-more="refreshHasMore"
+          @load-more="refreshLoadMore"
+          @refresh="refresh"
+        >
+          <li
+            class="infiniteLi"
+            v-for="(item, index) in refreshList"
+            :key="index"
+            >{{ item }}</li
+          >
+        </nut-infiniteloading>
+      </ul>
+    </nut-cell>
+
+    <h2>自定义加载文案</h2>
+    <nut-cell>
+      <ul class="infiniteUl" id="customScroll">
+        <nut-infiniteloading
+          load-txt="loading"
+          load-more-txt="没有啦～"
+          container-id="customScroll"
+          :use-window="false"
+          :has-more="customHasMore"
+          @load-more="customLoadMore"
+        >
+          <li
+            class="infiniteLi"
+            v-for="(item, index) in customList"
+            :key="index"
+            >{{ item }}</li
+          >
+        </nut-infiniteloading>
+      </ul>
+    </nut-cell>
+  </view>
+</template>
+
+<script lang="ts">
+import { onMounted, ref, reactive, toRefs } from 'vue';
+import { createComponent } from './../../../../../../packages/utils/create';
+const { createDemo } = createComponent('infiniteloading');
+import Toast from './../toast/index.taro.vue';
+export default createDemo({
+  props: {},
+  setup() {
+    const hasMore = ref(true);
+    const customHasMore = ref(true);
+    const refreshHasMore = ref(true);
+
+    const data = reactive({
+      defultList: [''],
+      customList: [''],
+      refreshList: ['']
+    });
+
+    const loadMore = done => {
+      setTimeout(() => {
+        const curLen = data.defultList.length;
+
+        for (let i = curLen; i < curLen + 10; i++) {
+          data.defultList.push(`${i}`);
+        }
+
+        if (data.defultList.length > 30) hasMore.value = false;
+
+        done();
+      }, 500);
+    };
+
+    const customLoadMore = done => {
+      setTimeout(() => {
+        const curLen = data.customList.length;
+        for (let i = curLen; i < curLen + 10; i++) {
+          data.customList.push(`${i}`);
+        }
+        if (data.customList.length > 30) customHasMore.value = false;
+        done();
+      }, 500);
+    };
+
+    const refreshLoadMore = done => {
+      setTimeout(() => {
+        const curLen = data.refreshList.length;
+        for (let i = curLen; i < curLen + 10; i++) {
+          data.refreshList.push(`${i}`);
+        }
+        if (data.refreshList.length > 30) refreshHasMore.value = false;
+        done();
+      }, 500);
+    };
+
+    const refresh = done => {
+      setTimeout(() => {
+        Toast.success('刷新成功');
+        done();
+      }, 1000);
+    };
+
+    const init = () => {
+      for (let i = 0; i < 10; i++) {
+        data.defultList.push(`${i}`);
+        data.customList.push(`${i}`);
+        data.refreshList.push(`${i}`);
+      }
+    };
+    onMounted(() => {
+      init();
+    });
+
+    return {
+      loadMore,
+      hasMore,
+      customHasMore,
+      customLoadMore,
+      refreshHasMore,
+      refreshLoadMore,
+      refresh,
+      ...toRefs(data)
+    };
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.infiniteUl {
+  height: 300px;
+  width: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+.infiniteLi {
+  margin-top: 10px;
+  font-size: 14px;
+  color: rgba(100, 100, 100, 1);
+  text-align: center;
+}
+
+.loading {
+  display: block;
+  width: 100%;
+  text-align: center;
+}
+</style>

src/sites/mobile-taro/vue/src/pages/infiniteloading/index.taro.vue

@@ -39,8 +39,9 @@ import {
   computed,
   CSSProperties
 } from 'vue';
-import { createComponent } from '@/packages/utils/create';
+import { createComponent } from './../../../../../../packages/utils/create';
 const { componentName, create } = createComponent('infiniteloading');
+import Icon from './../icon/index.taro.vue';
 export default create({
   props: {
     hasMore: {
@@ -91,7 +92,9 @@ export default create({
     }
   },
   emits: ['scroll-change', 'load-more', 'refresh'],
-
+  components: {
+    'nut-icon': Icon
+  },
   setup(props, { emit, slots }) {
     const state = reactive({
       scrollEl: window as Window | HTMLElement | (Node & ParentNode),
@@ -283,5 +286,5 @@ export default create({
 </script>
 
 <style lang="scss">
-@import 'index.scss';
+@import '../../../../../../packages/__VUE/infiniteloading/index.scss';
 </style>