Browse Source

feat: 无限加载适配

yangxiaolu3 4 years ago
parent
commit
2f42da75e3

File diff suppressed because it is too large
+ 14 - 66
src/sites/mobile-taro/vue/dist/pages/infiniteloading/demo.js


File diff suppressed because it is too large
+ 1 - 1
src/sites/mobile-taro/vue/dist/pages/infiniteloading/demo.js.map


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

@@ -355,7 +355,7 @@ to {
 }
 
 .infiniteUl {
-  height: 600rpx;
+  height: 1000rpx;
   width: 100%;
   overflow-y: auto;
   overflow-x: hidden;

+ 3 - 3
src/sites/mobile-taro/vue/project.config.json

@@ -2,14 +2,14 @@
   "miniprogramRoot": "dist/",
   "projectname": "myApp",
   "description": "taro-vue",
-  "appid": "wxee296c9bffc451d9",
+  "appid": "wx54c5683ae3f8a574",
   "setting": {
     "urlCheck": true,
     "es6": false,
-    "enhance": false,
+    "enhance": true,
     "postcss": false,
     "preloadBackgroundData": false,
-    "minified": false,
+    "minified": true,
     "newFeature": false,
     "coverView": true,
     "nodeModules": false,

+ 10 - 82
src/sites/mobile-taro/vue/src/pages/infiniteloading/demo.vue

@@ -1,65 +1,27 @@
 <template>
   <view class="demo">
-    <!-- <h2>基础用法</h2>
+    <h2>基础演示</h2>
     <nut-cell>
       <view-block class="infiniteUl" id="scrollDemo">
         <nut-infiniteloading
+          pull-icon="JD"
+          load-txt="loading"
+          load-more-txt="没有啦~"
+          :is-open-refresh="true"
           container-id="scrollDemo"
           :has-more="hasMore"
           @load-more="loadMore"
-        >
-          <view-block
-            class="infiniteLi"
-            v-for="(item, index) in defultList"
-            :key="index"
-            >{{ item }}</view-block
-          >
-        </nut-infiniteloading>
-      </view-block>
-    </nut-cell> -->
-
-    <h2>下拉刷新</h2>
-    <nut-cell>
-      <view-block 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"
         >
           <view-block
             class="infiniteLi"
-            v-for="(item, index) in refreshList"
+            v-for="(item, index) in defultList"
             :key="index"
             >{{ item }}</view-block
           >
         </nut-infiniteloading>
       </view-block>
     </nut-cell>
-
-    <!-- <h2>自定义加载文案</h2>
-    <nut-cell>
-      <view-block class="infiniteUl" id="customScroll">
-        <nut-infiniteloading
-          load-txt="loading"
-          load-more-txt="没有啦~"
-          container-id="customScroll"
-          :use-window="false"
-          :has-more="customHasMore"
-          @load-more="customLoadMore"
-        >
-          <view-block
-            class="infiniteLi"
-            v-for="(item, index) in customList"
-            :key="index"
-            >{{ item }}</view-block
-          >
-        </nut-infiniteloading>
-      </view-block>
-    </nut-cell> -->
   </view>
 </template>
 
@@ -70,7 +32,6 @@ const { createDemo } = createComponent('infiniteloading');
 import Infiniteloading from './index.taro.vue';
 import Cell from './../cell/index.taro.vue';
 
-// import Toast from './../toast/index.taro.vue';
 export default createDemo({
   props: {},
   components: {
@@ -79,13 +40,9 @@ export default createDemo({
   },
   setup() {
     const hasMore = ref(true);
-    const customHasMore = ref(true);
-    const refreshHasMore = ref(true);
 
     const data = reactive({
-      defultList: [''],
-      customList: [''],
-      refreshList: ['']
+      defultList: ['']
     });
 
     const loadMore = done => {
@@ -102,41 +59,16 @@ export default createDemo({
       }, 500);
     };
 
-    const customLoadMore = done => {
-      console.log('记载更多');
-      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('刷新成功');
+        console.log('刷新成功');
         done();
       }, 1000);
     };
 
     const init = () => {
-      for (let i = 0; i < 10; i++) {
+      for (let i = 0; i < 20; i++) {
         data.defultList.push(`${i}`);
-        data.customList.push(`${i}`);
-        data.refreshList.push(`${i}`);
       }
     };
     onMounted(() => {
@@ -146,10 +78,6 @@ export default createDemo({
     return {
       loadMore,
       hasMore,
-      customHasMore,
-      customLoadMore,
-      refreshHasMore,
-      refreshLoadMore,
       refresh,
       ...toRefs(data)
     };
@@ -159,7 +87,7 @@ export default createDemo({
 
 <style>
 .infiniteUl {
-  height: 300px;
+  height: 500px;
   width: 100%;
   overflow-y: auto;
   overflow-x: hidden;

+ 2 - 1
src/sites/mobile-taro/vue/src/pages/infiniteloading/index.taro.vue

@@ -142,7 +142,7 @@ export default create({
 
     /** 滚动到底部 */
     const lower = () => {
-      console.log('加载到底部', props.containerId);
+      // console.log('加载到底部', props.containerId);
       if (state.direction == 'up' || !props.hasMore || state.isInfiniting) {
         return false;
       } else {
@@ -153,6 +153,7 @@ export default create({
     };
 
     const scroll = e => {
+      console.log('加载到底部', props.containerId);
       // 滚动方向
       if (e.detail.scrollTop <= 0) {
         // 滚动到最顶部