修改

package.json

@@ -20,7 +20,8 @@
     "vue": "^2.6.14",
     "vue-router": "^3.5.1",
     "vue-seamless-scroll": "^1.1.23",
-    "vuex": "3.0.1"
+    "vuex": "3.0.1",
+    "vant": "^2.12.54"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",

src/main.js

@@ -26,6 +26,11 @@ Vue.config.productionTip = false;
 // }
 // this.getMsgTips();
 Vue.use(ElementUI);
+
+/* 导入第三方vant-ui插件  */
+import Vant from 'vant';
+import 'vant/lib/index.css';
+Vue.use(Vant);
 new Vue({
   router,
   store,

src/views/HomeView/AnswerGame/WeekKaijiang.vue

@@ -50,18 +50,26 @@
                                     <i class="el-icon-close"></i>
                                 </span>
                             </div>
-                            <div class="recordListBox" ref="scrollview" @mousewheel="scrollChange" v-loading="loading">
+                            <div  class="recordListBox">
                                 <div class="recordItem title">
                                     <div style="width: 30%;text-align: center;">购买日期</div>
                                     <div style="width: 40%;text-align: center;">奖券</div>
                                     <div style="width: 30%;text-align: center;">开奖结果</div>
                                 </div>
                                 <el-empty description="暂无数据" v-if="recordList.length == 0" :image-size="20"></el-empty>
-                                <div class="recordItem" v-for="(item, index) in recordList">
-                                    <div style="width: 30%;text-align: center;">{{ item.createTime }}</div>
-                                    <div style="width: 40%;text-align: center;">{{ item.couponNumber }}</div>
-                                    <div style="width: 30%;text-align: center;">{{ item.prizeName }}</div>
-                                </div>
+                                <van-list
+                                    v-if="recordList.length > 0"
+                                    v-model="loading"
+                                    :finished="finished"
+                                    finished-text=""
+                                    @load="onLoad"
+                                    >
+                                    <div class="recordItem" v-for="(item, index) in recordList">
+                                        <div style="width: 30%;text-align: center;">{{ item.createTime }}</div>
+                                        <div style="width: 40%;text-align: center;">{{ item.couponNumber }}</div>
+                                        <div style="width: 30%;text-align: center;">{{ item.prizeName }}</div>
+                                    </div>
+                                </van-list>
                             </div>
                         </el-card>
                     </div>
@@ -121,6 +129,7 @@ export default {
     data() {
         return {
             loading: false,
+            finished: false,
             recordList: [],
             page: 1,
             pageSize: 10,
@@ -143,57 +152,41 @@ export default {
             count: 1,
         };
     },
-    mounted() {
-        // 获取指定元素
-        const scrollview = this.$refs['scrollview']
-        // 添加滚动监听，该滚动监听了拖拽滚动条
-        // 尾部的 true 最好加上，我这边测试没加 true ，拖拽滚动条无法监听到滚动，加上则可以监听到拖拽滚动条滚动回调
-        scrollview.addEventListener('scroll', this.scrollChange, true)
-    },
-    // beforeDestroy 与 destroyed 里面移除都行
-    beforeDestroy() {
-        // 获取指定元素
-        const scrollview = this.$refs['scrollview']
-        // 移除监听
-        scrollview.removeEventListener('scroll', this.scrollChange, true)
-    },
     created() {
         this.getHomeData();
         this.getInvolveRecord();
     },
     methods: {
-        // 滚动监听
-        scrollChange(e) {
-            const dom = e.target
-            var scrollTop = dom.scrollTop; //滑入屏幕上方的高度
-            var windowHeitht = dom.clientHeight; //能看到的页面的高度
-            var scrollHeight = dom.scrollHeight; //监控的整个div的高度（包括现在看到的和上下隐藏起来看不到的）
-            let total = scrollTop + windowHeitht
-            if ((scrollHeight - total) < 1) {
-                this.getInvolveRecord();
-                console.log("到底了")
-            }
+        onLoad() {
+            let that = this;
+            setTimeout(function () {
+                that.getInvolveRecord();
+            }, 500);
         },
         getInvolveRecord() {
-            this.loading = true;
+            let that = this;
             involveRecord({
-                actId: this.actId,
-                page: this.page,
-                limit: this.pageSize
+                actId: that.actId,
+                page: that.page,
+                limit: that.pageSize
             }).then(res => {
                 console.log(res);
                 let list = res.data.data.items;
-                if (this.page == 1) {
-                    this.recordList = list;
+                if (that.page == 1) {
+                    that.recordList = list;
                 } else {
                     //如果不是则在后面追加数据
-                    this.rankList.push(...list);
+                    that.recordList.push(...list);
                 }
                 if (list.length == 10) {
-                    this.page += 1;
-                }
-                this.loading = false;
-            })
+                        that.page += 1;
+                        that.finished = false;
+                    }
+                    if (list.length < 10) {
+                        that.finished = true;
+                    }
+                    that.loading = false;
+                })
         },
         changeCount(val) {
             this.money = 2 * val;
@@ -332,6 +325,11 @@ export default {
 .title {
     font-size: 15px;
     font-weight: 600;
+    position: -webkit-sticky;
+    position: sticky;
+    top: -1px;
+    height: 30px;
+    background-color: #fff;
 }
 
 .recordItem {

yarn.lock

@@ -931,6 +931,13 @@
   resolved "https://registry.npmmirror.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310"
   integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==
 
+"@babel/runtime@7.x":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.25.7.tgz#7ffb53c37a8f247c8c4d335e89cdf16a2e0d0fb6"
+  integrity sha512-FjoyLe754PMiYsFaN5C94ttGiOmBNYTf6pLr4xXHAT5uctHb092PBszndLDR5XA/jghQvn4n7JMHl7dmTgbm9w==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/runtime@^7.12.13", "@babel/runtime@^7.8.4":
   version "7.21.0"
   resolved "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.21.0.tgz#5b55c9d394e5fcf304909a8b00c07dc217b56673"
@@ -1309,9 +1316,19 @@
   dependencies:
     "@types/node" "*"
 
-"@vue/babel-helper-vue-jsx-merge-props@^1.4.0":
+"@vant/icons@^3.0.2":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@vant/icons/-/icons-3.0.2.tgz#87f2dd74f0071d305b610d29f9442b89d346d05e"
+  integrity sha512-4OlRVMd0uiDtD9hgSISZW8hB95vU0fFtc41tQchRIyiXkR0tS+DydZOLb8/bQkithrNWhW7Uud38MbKjlJ9lJw==
+
+"@vant/popperjs@^1.1.0":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@vant/popperjs/-/popperjs-1.3.0.tgz#e0eff017124b5b2352ef3b36a6df06277f4400f2"
+  integrity sha512-hB+czUG+aHtjhaEmCJDuXOep0YTZjdlRR+4MSmIFnkCQIxJaXLQdSsR90XWvAI2yvKUI7TCGqR8pQg2RtvkMHw==
+
+"@vue/babel-helper-vue-jsx-merge-props@^1.0.0", "@vue/babel-helper-vue-jsx-merge-props@^1.4.0":
   version "1.4.0"
-  resolved "https://registry.npmmirror.com/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.4.0.tgz#8d53a1e21347db8edbe54d339902583176de09f2"
+  resolved "https://registry.yarnpkg.com/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.4.0.tgz#8d53a1e21347db8edbe54d339902583176de09f2"
   integrity sha512-JkqXfCkUDp4PIlFdDQ0TdXoIejMtTHP67/pvxlgeY+u5k3LEdKuWZ3LK6xkxo52uDoABIVyRwqVkfLQJhk7VBA==
 
 "@vue/babel-helper-vue-transform-on@^1.0.2":
@@ -5872,6 +5889,11 @@ regenerator-runtime@^0.13.11:
   resolved "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
   integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
 
+regenerator-runtime@^0.14.0:
+  version "0.14.1"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz#356ade10263f685dda125100cd862c1db895327f"
+  integrity sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==
+
 regenerator-transform@^0.15.1:
   version "0.15.1"
   resolved "https://registry.npmmirror.com/regenerator-transform/-/regenerator-transform-0.15.1.tgz#f6c4e99fc1b4591f780db2586328e4d9a9d8dc56"
@@ -6947,6 +6969,17 @@ validate-npm-package-license@^3.0.1:
     spdx-correct "^3.0.0"
     spdx-expression-parse "^3.0.0"
 
+vant@^2.12.54:
+  version "2.13.2"
+  resolved "https://registry.yarnpkg.com/vant/-/vant-2.13.2.tgz#a3353cdb14e91c3ad7c05875a4edfdf3179ee1bb"
+  integrity sha512-anZbbLqXCq+rUJk10D67mn+V/1/i9tfOTdoR+64B0e+0BzV3KFgpHBF76noLa+yX9i/L+8DeL560WMk0GEN38g==
+  dependencies:
+    "@babel/runtime" "7.x"
+    "@vant/icons" "^3.0.2"
+    "@vant/popperjs" "^1.1.0"
+    "@vue/babel-helper-vue-jsx-merge-props" "^1.0.0"
+    vue-lazyload "1.2.3"
+
 vary@~1.1.2:
   version "1.1.2"
   resolved "https://registry.npmmirror.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
@@ -6979,6 +7012,11 @@ vue-hot-reload-api@^2.3.0:
   resolved "https://registry.npmmirror.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"
   integrity sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==
 
+vue-lazyload@1.2.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/vue-lazyload/-/vue-lazyload-1.2.3.tgz#901f9ec15c7e6ca78781a2bae4a343686bdedb2c"
+  integrity sha512-DC0ZwxanbRhx79tlA3zY5OYJkH8FYp3WBAnAJbrcuoS8eye1P73rcgAZhyxFSPUluJUTelMB+i/+VkNU/qVm7g==
+
 vue-loader@^17.0.0:
   version "17.0.1"
   resolved "https://registry.npmmirror.com/vue-loader/-/vue-loader-17.0.1.tgz#c0ee8875e0610a0c2d13ba9b4d50a9c8442e7a3a"