分页功能:

1. 判断当前页和总页数
2. 追加数据

src/pages/goods_list/goods_list.vue

@@ -42,6 +42,20 @@
 </template>
 
 <script> 
+// 请求参数, 放全局变量
+const Params = {
+  // 关键字
+  query: "",
+  // 分类id
+  cid: null, 
+  // 页码
+  pagenum: 1,
+  // 页容量 一页有几条数据
+  pagesize: 10
+}
+// 总页数
+let TotalPage = 0
+
 export default {
   data(){
     return{
@@ -63,28 +77,33 @@ export default {
   },
 
   async onLoad ({ id }){
-    console.log(id)
-    const params = {
-      // 关键字
-      query: "",
+    Params.cid = id
+    this.getGoods()
+  },
 
-      // 分类id
-      cid: id,
-
-      // 页码
-      pagenum: 1,
-
-      // 页容量 一页有几条数据
-      pagesize: 10
+  // 滚动条到底触发
+  onReachBottom(){
+    // 判断有没有下一页
+    if(Params.pagenum >= TotalPage){
+      console.log("没有下一页数据了")
+    }else{
+      console.log("翻页")
+      Params.pagenum++
+      this.getGoods()
     }
-
-    // 从接口拿数据
-    const {message} = await this.$u.api.getGoods(params)
-    console.log(message)
-    this.goods = message.goods
   },
 
   methods: {
+    // 从接口拿数据
+    async getGoods (){
+      const {message} = await this.$u.api.getGoods(Params)
+      console.log(message)
+      // 追加数据
+      this.goods = [...this.goods, ...message.goods]
+      // 总页数
+      TotalPage = Math.ceil(message.total / Params.pagesize)
+    },
+    // 切换子页面
     onTapsChange(index){
       this.tabsCurrent = index
     }