添加下拉刷新和分页加载

miniprogram/pages/index/index.json

@@ -2,5 +2,7 @@
   "usingComponents": {},
   "navigationBarBackgroundColor": "#ceb17f",
   "navigationBarTitleText": "积分商城",
-  "navigationBarTextStyle": "white"
+  "navigationBarTextStyle": "white",
+  "enablePullDownRefresh": true,
+  "backgroundTextStyle": "dark"
 }

miniprogram/pages/index/index.ts

@@ -3,7 +3,7 @@
 import { queryGoodsList } from "../../service/shop-api"
 
 // 获取应用实例
-const app = getApp<IAppOption>()
+// const app = getApp<IAppOption>()
 Page({
   data: {
     swiperList: [
@@ -25,22 +25,53 @@ Page({
       }
     ],
     goodsItems: [],
-    recommendItems: []
+    recommendItems: [],
+    page: 1,
+    hasMore: true,
+    pageSize: 10
+  },
+  onPullDownRefresh() {
+    this.setData({
+      page: 1
+    })
+    this.onLoad()
+  },
+  onReachBottom() {
+    if (!this.data.hasMore) return;
+    const page = this.data.page + 1;
+    this.setData({page})
+    this.loadGoodsList(page)
+  },
+  loadGoodsList(page: number) {
+
+    // 所有其他的商品
+    queryGoodsList(1, page, this.data.pageSize).then((result) => {
+      //判断是否还有数据没有查询到
+      const count = page * this.data.pageSize;
+      if (count >= result.total) {
+        this.setData({
+          hasMore: false
+        })
+      }
+      this.setData({
+        // @ts-ignore
+        goodsItems: [
+          ...this.data.goodsItems,
+          ...result.records
+        ]
+      })
+    })
   },
   onLoad() {
     // 推荐商品
     queryGoodsList(2, 1, 3).then((result) => {
+      wx.stopPullDownRefresh();
       this.setData({
         // @ts-ignore
         recommendItems: result.records
       })
     })
     // 所有其他的商品
-    queryGoodsList(1, 1, 10).then((result) => {
+    this.loadGoodsList(this.data.page);
-      this.setData({
-        // @ts-ignore
-        goodsItems: result.records
-      })
-    })
   }
 })

miniprogram/pages/index/index.wxml

@@ -1,8 +1,6 @@
 <!--index.wxml-->
 <view class="container">
-  <view class="content-bg">
+  <view class="content-bg"></view>
-
-  </view>
   <view class="content-wrapper">
     <view class="top-swiper">
       <swiper indicator-dots="{{true}}" indicator-color="#fff" autoplay="{{true}}">