xcx

src/pages/user/orderList/index.vue

     <div class="flex-item">
       <div class="flex-h">
         <div class="flex-item">
-          <ul>
+          <!-- <ul>
             <li v-for="(item,index) in orders.list" :key="index">
               <orderListItem :data="item"></orderListItem>
             </li>
-          </ul>
+          </ul> -->
+          <scroll ref='scroll' :isloading='isloading' class='wrapper' :data='orders.list' :pullUpLoad='pullUpLoadObj' :startY='parseInt(startY)' @pullingUp='getList'>
+            <ul>
+              <li v-for="(item,index) in orders.list" :key="index">
+                <orderListItem :data="item"></orderListItem>
+              </li>
+            </ul>
+          </scroll>
         </div>
       </div>
     </div>
 </template>
 
 <script>
+import scroll from '../../../components/scroll/scroll'
+import noMore from '../../../components/noMore/noMore'
 import topCaseInfo from '../../../components/topCaseInfo/index'
 import orderListItem from '../../../components/orderListItem/index'
 import { mapState, createNamespacedHelpers } from 'vuex'
   name: '',
   data () {
     return {
+      pullUpLoad: true,
+      pullUpLoadThreshold: 40,
+      startY: 0,
       page: 1,
       pagesize: 10,
+      isloading: true,
+      hasMore: true,
     }
   },
   computed: {
     ...mapOrdersState({
       orders: x => x.orders,
     }),
+    pullUpLoadObj: function () {
+      return this.pullUpLoad
+        ? {
+          threshold: parseInt(this.pullUpLoadThreshold),
+          txt: {
+            more: this.pullUpLoadMoreTxt,
+            noMore: this.pullUpLoadNoMoreTxt
+          }
+        }
+        : false
+    }
   },
   components: {
     topCaseInfo,
     orderListItem,
+    scroll,
+    noMore,
   },
   created () {
     this.getCustomerGoodsOrder({
   methods: {
     ...mapOrdersActions([
       'getCustomerGoodsOrder',
-    ])
+    ]),
+    getList () {
+      var _that = this
+      Math.ceil(this.orders.pagenum / this.orders.pagesize) > this.page ? this.hasMore = true : this.hasMore = false
+      // this.list.length <= 8 ? this.hasMore = true : this.hasMore = false
+      if (this.hasMore) {
+        setTimeout(() => {
+          _that.getCustomerGoodsOrder({
+            page: _that.page,
+            pagesize: _that.pagesize,
+          })
+        }, 1000)
+      } else {
+        this.$refs.scroll.forceUpdate()
+        return false
+      }
+    },
   }
 }
 </script>

src/pages/user/orderList/page.scss

       &>div{
         margin: 0 .25rem;
         overflow: visible;
-        &>ul{
+        div{
+          overflow: visible;
+        }
+        ul{
           width: 100%;
           position: relative;
           overflow: visible;
             box-shadow: 0 0 .2rem .02rem rgba(0, 0, 0, .1);
             padding: .08rem 0;
             margin: .25rem auto 0;
-            // .title{
-            //   width: 100%;
-            //   position: relative;
-            //   overflow: hidden;
-            //   align-items: center;
-            //   &>div:nth-child(1){
-            //     width: .5rem;
-            //     text-align: center;
-            //     *{
-            //       display: inline-block;
-            //       font-size: .1rem;
-            //       line-height: .17rem;
-            //     }
-            //     i{
-            //       font-size: .15rem;
-            //     }
-            //   }
-            //   &>div:nth-child(1).orange{
-            //     *{
-            //       color: #fc6243;
-            //     }
-            //   }
-            //   &>div:nth-child(1).grey{
-            //     *{
-            //       color: #ccc;
-            //     }
-            //   }
-            //   &>div:nth-child(1).green{
-            //     *{
-            //       color: #63c86f;
-            //     }
-            //   }
-            //   &>div:nth-child(2){
-            //     margin-right: .1rem;
-            //     &>div{
-            //       width: 100%;
-            //       position: relative;
-            //       overflow: hidden;
-            //       span{
-            //         width: 100%;
-            //         display: block;
-            //         font-size: .14rem;
-            //         overflow: hidden;
-            //         text-overflow: ellipsis;
-            //         white-space: nowrap;
-            //       }
-            //     }
-            //   }
-            //   &>span{
-            //     font-size: .11rem;
-            //     color: #666;
-            //     margin-right: .15rem;
-            //   }
-            // }
-            // .line{
-            //   width: 100%;
-            //   height: .2rem;
-            //   position: relative;
-            //   overflow: hidden;
-            //   &>div{
-            //     width: 100%;
-            //     position: absolute;
-            //     overflow: hidden;
-            //     left: 0;
-            //     top: 50%;
-            //     transform: translateY(-50%) translateX(-.035rem);
-            //     -webkit-transform: translateY(-50%) translateX(-.035rem);
-            //     font-size: 0;
-            //     white-space: nowrap;
-            //     i{
-            //       display: inline-block;
-            //       width: .07rem;
-            //       height: .07rem;
-            //       position: relative;
-            //       overflow: hidden;
-            //       border-radius: 100%;
-            //       background: #eee;
-            //       margin-right: .1rem;
-            //     }
-            //   }
-            // }
-            // .list{
-            //   &>div{
-            //     margin: 0 .15rem;
-            //     &>ul{
-            //       margin: .06rem auto;
-            //       &>li{
-            //         font-size: 0;
-            //         white-space: nowrap;
-            //         &>*{
-            //           display: inline-block;
-            //           vertical-align: middle;
-            //           width: 50%;
-            //           overflow: hidden;
-            //           text-overflow: ellipsis;
-            //           white-space: nowrap;
-            //         }
-            //         &>span{
-            //           line-height: .26rem;
-            //           font-size: .14rem;
-            //           color: #555;
-            //         }
-            //         &>div{
-            //           text-align: right;
-            //           font-size: 0;
-            //           span{
-            //             font-size: .11rem;
-            //             line-height: .26rem;
-            //             color: #666;
-            //           }
-            //         }
-            //       }
-            //     }
-            //   }
-            // }
           }
         }
       }