添加触底翻页功能

src/pages/index/detail.vue

@@ -19,24 +19,54 @@
 export default {
   data() {
     return {
-      list: []
+      form: {
+        pageNum: 1,
+        pageSize: 10
+      },
+      total: 0,
+      list: [],
+      disabled: false
     }
   },
   onLoad(e) {
-    uni.request({
-      url: `https://o3tapi.radio1964.com/device/project/update/list`,
-      data: {
-        id: e.id,
-        pageNum: 1,
-        pageSize: 100
-      },
-      method: 'get',
-      success: (res) => {
-        if (res.data.code === 0) {
-          this.list = res.data.data.records
+    this.form.id = e.id
+    this.getList()
+  },
+  methods: {
+    getList() {
+      uni.showLoading({
+        title: '加载中...',
+        mask: true
+      })
+      uni.request({
+        url: `https://o3tapi.radio1964.com/device/project/update/list`,
+        data: this.form,
+        method: 'get',
+        success: (res) => {
+          if (res.data.code === 0) {
+            this.list = res.data.data.records
+            this.total = res.data.data.total
+            uni.hideLoading();
+          }
         }
+      })
+    }
+  },
+  onReachBottom() {
+    if (!this.disabled) {
+      if (this.list.length < this.total) {
+        this.form.pageSize += 10
+        this.getList()
+      } else {
+        uni.showToast({
+          title: '暂无更多',
+          icon: 'none',
+          success: (res) => {
+            this.disabled = true
+          }
+        })
       }
-    })
+    }
   }
 }
 </script>
@@ -79,17 +109,17 @@ a {
   margin-top: 20rpx;
 }
 
-.blue{
-  background: #409EFF;
-  color: #FFF
+.blue {
+  background: #409eff;
+  color: #fff;
 }
 
-.info{
+.info {
   background: #f4f4f4;
   color: #000;
 }
 
-::v-deep rich-text{
+::v-deep rich-text {
   color: #aaa;
   font-size: 22rpx;
 }