新增better-scroll

package.json

@@ -11,6 +11,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@better-scroll/core": "^2.5.1",
     "axios": "^1.6.3",
     "gsap": "^3.12.4",
     "howler": "^2.2.4",

src/components/Loading.vue

@@ -18,7 +18,7 @@ onMounted(() => {
     name: "加载页资源",
     imgs: loadImg,
     callback: (progress) => {
-      console.log('进度：', progress);
+      // console.log('进度：', progress);
     },
   }).then((res) => {
     gsap.to(".LoadPage", {

src/components/Rule.vue

@@ -1,16 +1,24 @@
 <script setup>
 import { debounceTap } from "@/plugins";
 import gsap from "gsap";
+import BScroll from '@better-scroll/core'
 
 // 页面配置初始化
 const emit = defineEmits(["RulePage"]);
 
 const hide = (event) => {
     debounceTap(event.target, () => {
+        scroll.value.destroy()
         emit("RulePage", { action: "hide" });
     });
 };
+
+let scroll = ref()
 onMounted(() => {
+
+    let wrapper = document.querySelector('.wrapper')
+     scroll.value = new BScroll(wrapper)
+
     gsap.from(".RulePage", { duration: 0.2, autoAlpha: 0 });
     gsap.from(".rule-container", { duration: 0.5, autoAlpha: 0, scale: 0.7 });
     gsap.to(".rule-arrow", { duration: 2.5, y: 10,repeat:-1,yoyo:true  });
@@ -18,11 +26,12 @@ onMounted(() => {
 </script>
 
 <template>
-    <div class="RulePage">
+    <div class="RulePage" @touchmove.prevent>
         <div class="rule-container">
             <div class="content">
                 <div class="rule-content">
-                    <div class="rule-text-area">
+                    <div class="rule-text-area wrapper">
+                        <div>
                         <div class="part">
                             <div>活动时间：2024年2月23日——2月25日</div>
                             <div>活动奖励：微信红包</div>
@@ -68,9 +77,9 @@ onMounted(() => {
                                 3、用户参与本活动，即视为理解并同意本活动细则。在法律规定的范围内，平安理财有权对活动规则进行解释，并根据活动实际情况对本活动的规则进行变动或调整，相关变动或调整将公布在规则页面，并于公布时即时生效。
                             </div>
                         </div>
-                            
                         <div class="margin-bottom-area"></div>
                     </div>
+                    </div>
                 </div>
                 <div class="rule-bottom-bg"></div>
                 <div class="rule-arrow"></div>
@@ -101,9 +110,8 @@ onMounted(() => {
 
                 .rule-text-area {
                     @include pos(612px, 676px, 0px, 101px);
-                    // background-color: #000000;
                     overflow: hidden;
-                    overflow-y: scroll;
+                    // overflow-y: scroll;
                     padding: 0px 20px;
                     
 
@@ -123,7 +131,8 @@ onMounted(() => {
                     }
 
                     .margin-bottom-area{
-                        margin-bottom: 100px;
+                        // margin-bottom: 100px;
+                        height: 100px;
                     }
                 }
             }

yarn.lock

@@ -19,6 +19,18 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
+"@better-scroll/core@^2.5.1":
+  version "2.5.1"
+  resolved "https://registry.npmmirror.com/@better-scroll/core/-/core-2.5.1.tgz#de53f089a2f53f51e58e5042556fe0d3e1655aa9"
+  integrity sha512-koKOuYA55dQ04FJRIVUpMGDr1hbCfWmfX0MGp1hKagkQSWSRpwblqACiwtggVauoj9aaJRJZ9hDsTM4weaavlg==
+  dependencies:
+    "@better-scroll/shared-utils" "^2.5.1"
+
+"@better-scroll/shared-utils@^2.5.1":
+  version "2.5.1"
+  resolved "https://registry.npmmirror.com/@better-scroll/shared-utils/-/shared-utils-2.5.1.tgz#ed6a1b5713462fa50afd8bb7d172ca218a0b7f2e"
+  integrity sha512-AplkfSjXVYP9LZiD6JsKgmgQJ/mG4uuLmBuwLz8W5OsYc7AYTfN8kw6GqZ5OwCGoXkVhBGyd8NeC4xwYItp0aw==
+
 "@esbuild/android-arm@0.15.18":
   version "0.15.18"
   resolved "https://registry.npmmirror.com/@esbuild/android-arm/-/android-arm-0.15.18.tgz#266d40b8fdcf87962df8af05b76219bc786b4f80"