首页上拉加载

pages/index/index.vue

@@ -36,7 +36,7 @@
 
     <u-picker :defaultIndex="[0,0]" :show="showPicker" ref="uPicker" :columns="columnData" @confirm="confirm"
       @cancel="showPicker = false" @change="changeHandler" keyName="name"></u-picker>
-
+    <u-loadmore :status="status" />
     <!-- <view class="bg_color"></view> -->
 
     <!-- <m-tabbar native>
@@ -65,20 +65,11 @@
     },
     data() {
       return {
+        status: 'loadmore',
         bgColor: '',
         showPicker: false,
         columnData: [],
         show: false,
-        swiper: {
-          url: [{
-            img: ''
-          }],
-          indicatorDots: true, // 显示面板指示点
-          vertical: false, // 滑动方向是否为纵向
-          autoplay: true, // 是否自动切换
-          interval: 2000, // 自动切换时间间隔
-          duration: 500 // 滑动动画时长
-        },
         tabsData: {
           list: [],
           tabsActive: 0
@@ -110,6 +101,12 @@
       this.Area()
     },
     onShow() {},
+    onReachBottom() {
+      if (this.status == 'nomore') return;
+      this.status = 'loading';
+      this.where.page = ++this.where.page;
+      this.getGoods()
+    },
     methods: {
       confirm(e) {
         this.where.street_id = e.value[1].code
@@ -177,14 +174,12 @@
           }
         })
       },
-      dianji() {
-        this.show = !this.show
-      },
-      // 获取发现商品
       getGoods: function() {
-        // 数据写死：默认社区数据 category_id=69&page=1&limit=30
         graphicLstApi(this.where).then(res => {
-          this.cateGoods = res.data.list
+          this.cateGoods.push(...res.data.list)
+          if (res.data.list.length < this.where.limit) {
+            this.status == 'nomore'
+          }
           res.data.list.length <= 0 ? this.emptyShow = true : this.emptyShow = false
         })
       },