refactor: 优化部分示例及测试

pages/API/compress-image/compress-image.uvue

@@ -2,6 +2,7 @@
   <!-- #ifdef APP -->
   <scroll-view style="flex:1">
   <!-- #endif -->
+    <view>
       <page-head :title="title"></page-head>
       <view class="uni-padding-wrap">
         <view class="image-container">
@@ -27,9 +28,8 @@
         @confirm="onQualityConfirm"></input-data>
       <input-data title="压缩后图片的宽度，单位px" type="string" @confirm="onCompressedWidthConfirm"></input-data>
       <input-data title="压缩后图片的高度，单位px" type="string" @confirm="onCompressedHeightConfirm"></input-data>
-<!--    <input-data defaultValue="auto" title="压缩后图片的宽度，支持px、%、auto" type="string" @confirm="onWidthConfirm"></input-data>
-    <input-data defaultValue="auto" title="压缩后图片的高度，支持px、%、auto" type="string" @confirm="onHeightConfirm"></input-data> -->
       <input-data defaultValue="0" title="旋转度数，范围0～360" type="number" @confirm="onRotateConfirm"></input-data>
+    </view>
   <!-- #ifdef APP -->
   </scroll-view>
   <!-- #endif -->
@@ -156,7 +156,7 @@
             uni.getImageInfo({
               src: res.tempFilePath,
               success: (_res) => {
-                let beforeCompressSize: number, afterComoressSize: number;
+                let beforeCompressSize : number, afterComoressSize : number;
                 // #ifdef APP-ANDROID
                 beforeCompressSize = new FileInputStream(UTSAndroid.convert2AbsFullPath(this.imageSrcForTest)).available();
                 afterComoressSize = new FileInputStream(res.tempFilePath.substring("file://".length)).available();

pages/API/compress-video/compress-video.uvue

@@ -3,6 +3,7 @@
   <scroll-view style="flex:1">
   <!-- #endif -->
     <page-head :title="title"></page-head>
+    <view>
       <view class="uni-padding-wrap">
         <video class="video" :src="beforeCompressPath" :controls="true"></video>
         <view class="uni-title">
@@ -26,6 +27,7 @@
           <slider :min="0.1" :max="1" :step="0.1" :show-value="true" @change="onResolutionChange"></slider>
         </view>
       </view>
+    </view>
   <!-- #ifdef APP -->
   </scroll-view>
   <!-- #endif -->
@@ -116,7 +118,7 @@
         this.resolution = event.detail.value;
       },
       testCompressVideo() {
-        let beforeCompressSize: number, afterComoressSize: number;
+        let beforeCompressSize : number, afterComoressSize : number;
         uni.compressVideo({
           src: this.videoSrcForTest,
           quality: 'medium',

pages/API/get-current-pages/get-current-pages.uvue

@@ -2,6 +2,7 @@
   <!-- #ifdef APP -->
   <scroll-view class="page-scroll-view">
   <!-- #endif -->
+    <view>
       <page-head title="getCurrentPages"></page-head>
       <view class="uni-padding-wrap">
         <button @click="_getCurrentPages">getCurrentPages</button>
@@ -31,11 +32,14 @@
           </view>
           <view class="set-value" v-else-if="item.type == 'string'">
             <radio-group class="radio-set-value" @change="radioChange(item.key, $event as RadioGroupChangeEvent)">
-            <radio class="radio-value" v-for="(item2, index2) in item.value" :key="index2" :value="item2" >{{item2}}</radio>
+              <radio class="radio-value" v-for="(item2, index2) in item.value" :key="index2" :value="item2">{{item2}}
+              </radio>
             </radio-group>
           </view>
         </view>
       </template>
+      <button style='margin: 10px;' @click="goSetDisablePullDownRefresh">go set disable pullDownRefresh</button>
+    </view>
   <!-- #ifdef APP -->
   </scroll-view>
   <!-- #endif -->
@@ -117,6 +121,11 @@
         const currentPage = pages[pages.length - 1];
         currentPage.$setPageStyle(style);
       },
+      goSetDisablePullDownRefresh() {
+        uni.navigateTo({
+          url: '/pages/API/get-current-pages/set-page-style-disable-pull-down-refresh'
+        });
+      }
       // getCurrentPage(): Page {
       //   const pages = getCurrentPages();
       //   const currentPage = pages[pages.length - 1];

pages/CSS/overflow/overflow-visible-event.uvue

 <template>
+  <!-- #ifdef APP -->
   <scroll-view style="flex: 1;">
+  <!-- #endif -->
     <view>
       <text style="font-size: 15px;">overflow=visible 父view（绿色），子view（红色），点击超出父view区域的部分也可触发事件。</text>
       <view class="backgroundview">
@@ -29,7 +31,9 @@
         </view>
       </view>
     </view>
+  <!-- #ifdef APP -->
   </scroll-view>
+  <!-- #endif -->
 </template>
 
 <script>

pages/CSS/transform/rotate.uvue

 <template>
-<scroll-view class="page">
-
+  <!-- #ifdef APP -->
+  <scroll-view class="page">
+  <!-- #endif -->
+    <view class="rotate-container">
       <view class="trace">
         <view class="base reserve">
           <text class="reserve-text">rotate(20deg)</text>
@@ -37,48 +39,60 @@
         <text>转变后位置</text>
       </view>
 
-</scroll-view>
+    </view>
+  <!-- #ifdef APP -->
+  </scroll-view>
+  <!-- #endif -->
 </template>
 
 <script lang="uts">
-export default {
+  export default {
     data() {
       return {
       }
     },
     methods: {
     },
-}
+  }
 </script>
 
 <style>
-.page {
+  .page {
     flex: 1;
+  }
+
+  .rotate-container {
+    display: flex;
     align-items: center;
-}
-.trace {
+  }
+
+  .trace {
     position: absolute;
     top: 0px;
     left: 0px;
     width: 100%;
     align-items: center;
-}
-.base {
+  }
+
+  .base {
     margin: 10px;
     width: 150px;
     height: 150px;
     align-items: center;
     justify-content: center;
-}
-.reserve {
+  }
+
+  .reserve {
     border: 1px dotted #588;
     background-color: #DDD;
-}
-.reserve-text {
+  }
+
+  .reserve-text {
     color: #CCC;
-}
-.transform {
+  }
+
+  .transform {
     border: 1px solid #00F;
-	background-color: rgba(0,255,255,0.5);
-}
+    background-color: rgba(0, 255, 255, 0.5);
+  }
 </style>

pages/CSS/transform/scale.uvue

 <template>
+  <!-- #ifdef APP -->
   <scroll-view class="page">
+  <!-- #endif -->
+    <view class="scale-container">
       <view class="trace">
         <view class="base reserve">
           <text class="reserve-text">scaleX(0.6)</text>
@@ -32,8 +35,10 @@
         <text>通过scaleY(0.5)实现0.5px的线</text>
         <view style="width: 150px; height: 1px; background-color: #000; transform: scaleY(0.5)"></view>
       </view>
-
+    </view>
+  <!-- #ifdef APP -->
   </scroll-view>
+  <!-- #endif -->
 </template>
 
 <script lang="uts">
@@ -42,6 +47,10 @@
 <style>
   .page {
     flex: 1;
+  }
+
+  .scale-container {
+    display: flex;
     align-items: center;
   }
 

pages/CSS/transform/translate.uvue

 <template>
-<scroll-view class="page">
+  <!-- #ifdef APP -->
+  <scroll-view class="page">
+  <!-- #endif -->
+    <view class="translate-container">
       <view class="trace">
         <view class="base reserve">
           <text class="reserve-text">translateX(80%)</text>
@@ -27,48 +30,60 @@
         <text>translate(-50%,50%)</text>
         <text>转变后位置</text>
       </view>
-</scroll-view>
+    </view>
+  <!-- #ifdef APP -->
+  </scroll-view>
+  <!-- #endif -->
 </template>
 
 <script lang="uts">
-export default {
+  export default {
     data() {
       return {
       }
     },
     methods: {
     },
-}
+  }
 </script>
 
 <style>
-.page {
+  .page {
     flex: 1;
+  }
+
+  .translate-container{
+    display: flex;
     align-items: center;
-}
-.trace {
+  }
+
+  .trace {
     position: absolute;
     top: 0px;
     left: 0px;
     width: 100%;
     align-items: center;
-}
-.base {
+  }
+
+  .base {
     margin: 10px;
     width: 150px;
     height: 150px;
     align-items: center;
     justify-content: center;
-}
-.reserve {
+  }
+
+  .reserve {
     border: 1px dotted #588;
     background-color: #DDD;
-}
-.reserve-text {
+  }
+
+  .reserve-text {
     color: #CCC;
-}
-.transform {
+  }
+
+  .transform {
     border: 1px solid #00F;
-	background-color: rgba(0,255,255,0.5);
-}
+    background-color: rgba(0, 255, 255, 0.5);
+  }
 </style>

pages/pages.test.js

@@ -80,7 +80,8 @@ const pages = [
   // '/pages/component/unicloud-db/unicloud-db/contacts/edit',
   // 动态内容
   // '/pages/component/unicloud-db/unicloud-db/contacts/detail',
-  '/pages/component/unicloud-db/unicloud-db/mixin-datacom/mixin-datacom',
+  // 动态内容
+  // '/pages/component/unicloud-db/unicloud-db/mixin-datacom/mixin-datacom',
   // 单独测试例截图
   // '/pages/component/global-properties/global-properties',
   '/pages/component/global-events/global-events',