fix: 修复弹窗位置随页面滚动的Bug

pages.json

@@ -1014,7 +1014,8 @@
       "style": {
         "navigationBarTitleText": "模板"
       }
-    },
+    },
+    // #ifdef APP
     {
       "path": "pages/template/list-news/list-news",
       "style": {
@@ -1026,7 +1027,8 @@
       "style": {
         "navigationBarTitleText": "详情示例"
       }
-    },
+    },
+    // #endif
     {
       "path": "pages/template/drop-card/drop-card",
       "style": {
@@ -1077,7 +1079,8 @@
       "style": {
         "navigationBarTitleText": "半屏弹窗"
       }
-    },
+    },
+    // #ifdef APP
     {
       "path": "pages/template/long-list/long-list",
       "style": {
@@ -1091,7 +1094,8 @@
         "navigationBarTitleText": "顶部banner长列表",
         "enablePullDownRefresh": true
       }
-    },
+    },
+    // #endif
     {
       "path": "pages/template/pull-zoom-image/pull-zoom-image",
       "style": {

pages/tabBar/API.uvue

 <template>
   <!-- #ifdef APP -->
   <scroll-view style="flex: 1">
-    <!-- #endif -->
+  <!-- #endif -->
     <view class="uni-container">
       <view class="uni-header-logo">
         <image class="uni-header-image" src="/static/apiIndex.png"></image>
@@ -26,11 +26,10 @@
       </uni-collapse>
 
     </view>
-    <!-- #ifdef APP -->
+  <!-- #ifdef APP -->
   </scroll-view>
   <!-- #endif -->
-  <view ref="pop" @click="hidePop()"
-    style="width: 100%; height: 100%; position: absolute;align-items: center;justify-content: center; display: none;background-color: rgba(16, 16, 16, 0.5);">
+  <view ref="pop" @click="hidePop()" class="popup">
     <view style="width: 90%;background-color: white;" @click="stopClickPop">
       <api-set-tabbar></api-set-tabbar>
     </view>
@@ -86,12 +85,12 @@
               {
                 name: '获取启动参数',
                 url: 'get-launch-options-sync',
-              },
+              },
               // #ifdef APP-ANDROID
               {
                 name: '退出应用',
                 url: 'exit',
-              },
+              },
               // #endif
             ] as Page[],
           },
@@ -137,19 +136,19 @@
               //   name: "创建动画",
               //   url: "animation",
               //   enable: false
-              // },
+              // },
               // #ifdef WEB
               {
                 name: "创建绘画",
                 url: "canvas",
                 enable: true
-              },
+              },
               // #endif
               // {
               //   name: "节点布局交互状态",
               //   url: "intersection-observer",
               //   enable: false
-              // },
+              // },
               // #ifdef APP
               {
                 name: 'element元素',
@@ -160,11 +159,11 @@
                 name: 'element draw',
                 url: 'element-draw',
                 api: ["Element.getDrawableContext"]
-              },{
+              }, {
                 name: 'element截图',
                 url: 'element-takesnapshot',
                 api: ["Element.takeSnapshot"]
-              },
+              },
               // #endif
               {
                 name: 'node节点',
@@ -246,7 +245,7 @@
               {
                 name: '获取APP基础信息',
                 url: 'get-app-base-info',
-              },
+              },
               // #ifdef APP
               {
                 name: '获取APP授权设置',
@@ -255,17 +254,17 @@
               {
                 name: '获取系统设置',
                 url: 'get-system-setting',
-              },
+              },
               // #endif
               {
                 name: '电量',
                 url: 'get-battery-info',
-              },
+              },
               // #ifdef APP-ANDROID
               {
                 name: '安装Apk',
                 url: 'install-apk'
-              },
+              },
               // #endif
               /* {
                 name: "打电话",
@@ -333,12 +332,12 @@
                 name: '图片预览',
                 url: 'preview-image',
                 api: ["previewImage", "closePreviewImage"]
-              },
+              },
               // #ifdef APP
               {
                 name: "保存图片到相册",
                 url: 'save-image-to-photos-album'
-              },
+              },
               // #endif
               /* {
                 name: "图片选择和拍照",
@@ -407,8 +406,8 @@
                 api: ["getStorageInfo", "getStorageInfoSync", "getStorage", "getStorageSync", "setStorage", "setStorageSync", "removeStorage", "removeStorageSync", "clearStorage", "clearStorageSync"]
               }
             ] as Page[],
-          },
-          // #ifdef APP-ANDROID
+          },
+          // #ifdef APP-ANDROID
           {
             id: 'file',
             name: '文件',
@@ -418,7 +417,7 @@
                 url: 'get-file-system-manager'
               },
             ] as Page[],
-          },
+          },
           // #endif
           {
             id: 'unicloud',
@@ -551,4 +550,20 @@
   .item {
     margin-bottom: 12px;
   }
-</style>
+
+  .popup {
+    width: 100%;
+    /* #ifdef APP */
+    position: absolute;
+    height: 100%;
+    /* #else */
+    position: fixed;
+    top: var(--window-top);
+    bottom: var(--window-bottom);
+    /* #endif */
+    align-items: center;
+    justify-content: center;
+    display: none;
+    background-color: rgba(16, 16, 16, 0.5);
+  }
+</style>

pages/tabBar/template.uvue

@@ -54,7 +54,8 @@
   export default {
     data() {
       return {
-        list: [
+        list: [
+          // #ifdef APP
           {
             id: 'long-list',
             url: 'long-list',
@@ -78,7 +79,8 @@
             name: '列表到详情',
             open: false,
             pages: [] as Page[],
-          },
+          },
+          // #endif
           {
             id: 'scroll-fold-nav',
             url: 'scroll-fold-nav',
@@ -124,14 +126,16 @@
             name: '竖滑视频',
             open: false,
             pages: [] as Page[],
-          },
+          },
+          // #ifdef APP
           {
             id: 'scroll-sticky',
             url: 'scroll-sticky',
             name: 'scroll-view自定义滚动吸顶',
             open: false,
             pages: [] as Page[],
-          },
+          },
+          // #endif
           {
             id: 'half-screen',
             url: 'half-screen',