no message

package-lock.json

@@ -28,6 +28,7 @@
         "vue": "^2.6.14",
         "vue-clipboard2": "^0.3.3",
         "vue-i18n": "8",
+        "vue-infinite-scroll": "^2.0.2",
         "vue-router": "^3.5.1",
         "vue-seamless-scroll": "^1.1.23",
         "vuex": "^3.6.2",
@@ -13120,6 +13121,11 @@
       "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.27.2.tgz",
       "integrity": "sha512-QVzn7u2WVH8F7eSKIM00lujC7x1mnuGPaTnDTmB01Hd709jDtB9kYtBqM+MWmp5AJRx3gnqAdZbee9MelqwFBg=="
     },
+    "node_modules/vue-infinite-scroll": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/vue-infinite-scroll/-/vue-infinite-scroll-2.0.2.tgz",
+      "integrity": "sha512-n+YghR059YmciANGJh9SsNWRi1YZEBVlODtmnb/12zI+4R72QZSWd+EuZ5mW6auEo/yaJXgxzwsuhvALVnm73A=="
+    },
     "node_modules/vue-loader": {
       "version": "17.0.0",
       "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-17.0.0.tgz",
@@ -23893,6 +23899,11 @@
       "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.27.2.tgz",
       "integrity": "sha512-QVzn7u2WVH8F7eSKIM00lujC7x1mnuGPaTnDTmB01Hd709jDtB9kYtBqM+MWmp5AJRx3gnqAdZbee9MelqwFBg=="
     },
+    "vue-infinite-scroll": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/vue-infinite-scroll/-/vue-infinite-scroll-2.0.2.tgz",
+      "integrity": "sha512-n+YghR059YmciANGJh9SsNWRi1YZEBVlODtmnb/12zI+4R72QZSWd+EuZ5mW6auEo/yaJXgxzwsuhvALVnm73A=="
+    },
     "vue-loader": {
       "version": "17.0.0",
       "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-17.0.0.tgz",

package.json

@@ -31,6 +31,7 @@
     "vue": "^2.6.14",
     "vue-clipboard2": "^0.3.3",
     "vue-i18n": "8",
+    "vue-infinite-scroll": "^2.0.2",
     "vue-router": "^3.5.1",
     "vue-seamless-scroll": "^1.1.23",
     "vuex": "^3.6.2",

src/views/Forestage/Tourism/index.vue

@@ -24,6 +24,16 @@
 				</div>
 			</div>
 		</div>
+    <div class="justify-right p-b-33">
+      <el-pagination
+        class="pagination-data"
+        background
+        layout="prev, pager, next"
+        :page-size="10"
+        :total="total">
+      </el-pagination>
+    </div>
+
     <order-sett ref="orderSett"></order-sett>
 	</div>
 </template>
@@ -47,7 +57,10 @@
 				classList: [],
 				goodsList: [],
 				isAJAX: false,
+        busy: false,
 				lang:'en',
+        page:1,
+        total:0
 			}
 		},
 		created() {
@@ -64,7 +77,16 @@
 
 		},
 		methods: {
-
+      loadMore() {
+        console.log('loadMore---------------------')
+        if (this.busy) return; // 防止重复加载数据
+        this.busy = true; // 设置加载状态为忙碌状态
+        // 模拟从服务器获取数据（替换为你的实际数据获取逻辑）
+        setTimeout(() => {
+         this.getlist()
+          this.busy = false; // 设置加载状态为非忙碌状态，允许再次触发加载更多事件
+        }, 1000); // 模拟网络延迟时间，实际应用中应为异步请求的响应时间
+      },
 			getClass() {
 				getClass().then((res) => {
 					if (res.code == 1) {
@@ -76,10 +98,17 @@
 			},
 			getlist() {
 				getList({
-					class_id: this.id
+					class_id: this.id,
+          page:this.page
 				}).then((res) => {
 					if (res.code == 1) {
-						this.goodsList = res.data.list;
+            this.total=res.data.total
+            if(this.page===1){
+              this.goodsList = res.data.list;
+            }else {
+              this.goodsList.push(...res.data.list);
+            }
+            ++this.page
 					}
 				})
 			},
@@ -118,6 +147,9 @@
 </script>
 
 <style scoped lang="scss">
+.pagination-data{
+  background-color: rgba(0,0,0,0);
+}
 	.tourism-box {
 		padding-top: 70px;
 		min-height: 100vh;

yarn.lock

@@ -7668,6 +7668,11 @@
   "resolved" "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.27.2.tgz"
   "version" "8.27.2"
 
+"vue-infinite-scroll@^2.0.2":
+  "integrity" "sha512-n+YghR059YmciANGJh9SsNWRi1YZEBVlODtmnb/12zI+4R72QZSWd+EuZ5mW6auEo/yaJXgxzwsuhvALVnm73A=="
+  "resolved" "https://registry.npmjs.org/vue-infinite-scroll/-/vue-infinite-scroll-2.0.2.tgz"
+  "version" "2.0.2"
+
 "vue-loader@^17.0.0":
   "integrity" "sha512-OWSXjrzIvbF2LtOUmxT3HYgwwubbfFelN8PAP9R9dwpIkj48TVioHhWWSx7W7fk+iF5cgg3CBJRxwTdtLU4Ecg=="
   "resolved" "https://registry.npmmirror.com/vue-loader/-/vue-loader-17.0.0.tgz"