scroll-view: 重构样式; rpx to px

common/uni.css

@@ -256,3 +256,9 @@
 }
 
 /* --tab-bar-eng-- */
+
+/* #ifdef APP */
+.page-scroll-view {
+  flex: 1;
+}
+/* #endif */

pages/component/scroll-view/scroll-view-props.uvue

@@ -221,6 +221,10 @@
     border-color: chocolate;
   }
 
+  .uni-list {
+    flex: 1;
+  }
+
   .uni-text {
     color: black;
     font-size: 50px;

pages/component/scroll-view/scroll-view-refresher-props.uvue

 <template>
-	<view style="flex:1;">
+  <view class="page-scroll-view">
     <page-head title="下拉刷新的scroll-view属性示例"></page-head>
     <view class="uni-margin-wrap">
       <scroll-view direction="vertical" :refresher-enabled="refresherEnabled" :refresher-threshold="refresherThreshold"
         :refresher-default-style="refresherDefaultStyle" :refresher-background="refresherBackground"
         :refresher-triggered="refresherTriggered" @refresherpulling="refresherpulling"
-				@refresherrefresh="refresherrefresh" @refresherrestore="refresherrestore"
-				@refresherabort="refresherabort" style="width: 100%;height: 100%;">
+        @refresherrefresh="refresherrefresh" @refresherrestore="refresherrestore" @refresherabort="refresherabort"
+        style="width: 100%;height: 100%;">
         <view class="item" :id="item.id" v-for="(item,_) in items">
           <text class="uni-text">{{item.label}}</text>
         </view>
@@ -29,21 +29,22 @@
 
       <view class="uni-option">
         <text>设置下拉刷新阈值</text>
-				<input style="width: 100rpx;border-width: 2rpx;text-align: center;  border-style: solid;" :disabled="!refresherEnabled"
-					:value="refresherThreshold" type="number" @input="handleRefresherThresholdInput" />
+        <input style="width: 50px;border-width: 1px;text-align: center;  border-style: solid;"
+          :disabled="!refresherEnabled" :value="refresherThreshold" type="number"
+          @input="handleRefresherThresholdInput" />
       </view>
 
       <view class="uni-option">
         <text>设置下拉刷新区域背景颜色</text>
-				<input style="width: 200rpx;border-width: 2rpx;text-align: center; border-style: solid;" :disabled="!refresherEnabled"
-					:value="refresherBackground" @input="handleRefresherBackground" />
+        <input style="width: 100px;border-width: 1px;text-align: center; border-style: solid;"
+          :disabled="!refresherEnabled" :value="refresherBackground" @input="handleRefresherBackground" />
       </view>
 
-			<view style="height: 200rpx;padding: 20rpx; ">
+      <view style="height: 100px;padding: 10px; ">
         <text>设置下拉刷新默认样式</text>
         <view class="uni-common-pb"></view>
         <view style="flex-direction: row;">
-					<button style="padding: 5rpx; margin-right: 10rpx;" type="primary" size="mini"
+          <button style="padding: 5rpx; margin-right: 5px;" type="primary" size="mini"
             @click="refresherDefaultStyle = `none`">none</button>
           <button style="padding: 5rpx; margin-right: 10rpx; " type="primary" size="mini"
             @click="refresherDefaultStyle = `black`">black</button>
@@ -63,6 +64,7 @@
     id : string,
     label : string,
   }
+
   export default {
     data() {
       return {
@@ -99,7 +101,6 @@
           this.refresherThreshold = parseInt(e.detail.value);
         }
       },
-
       handleRefresherBackground(e : InputEvent) {
         const value = e.detail.value;
         this.refresherBackground = value;
@@ -128,18 +129,18 @@
 
 <style>
   .uni-margin-wrap {
-		height: 400rpx;
-		margin-left: 50rpx;
-		margin-right: 50rpx;
+    height: 200px;
+    margin-left: 25px;
+    margin-right: 25px;
   }
 
   .item {
     justify-content: center;
     align-items: center;
-		height: 400rpx;
+    height: 200px;
     width: 100%;
     background-color: azure;
-		border-width: 2rpx;
+    border-width: 1px;
     border-style: solid;
     border-color: chocolate;
   }
@@ -151,15 +152,15 @@
 
   .uni-list {
     flex: 1;
-		margin: 50rpx 50rpx 0rpx 50rpx;
+    margin: 25px 25px 0 25px;
   }
 
   .uni-option {
-		height: 100rpx;
+    height: 50px;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
-		padding: 20rpx;
+    padding: 10px;
   }
 
   .picker-view {

pages/component/scroll-view/scroll-view-refresher.uvue

 <template>
   <view class="container">
     <page-head title="scroll-view 下拉刷新"></page-head>
-		<scroll-view class="scroll" refresher-enabled = true :refresher-triggered = "refresherTriggered"
+    <scroll-view class="scroll" refresher-enabled=true :refresher-triggered="refresherTriggered"
       @refresherrefresh="onRefresherrefresh" @refresherabort="onRefresherabort" @refresherrestore="onRefresherrestore"
       @refresherpulling="onRefresherpulling" @scrolltolower="onScrolltolower">
       <view v-for="key in scrollData" :key="key">
@@ -14,24 +14,23 @@
 </template>
 <script>
   export default {
-
     data() {
       return {
-				scrollData: [] as Array <string>,
+        scrollData: [] as Array<string>,
         refresherTriggered: false,
         refresherrefresh: false
       };
     },
     onLoad() {
-			let lists: Array < string > = []
+      let lists : Array<string> = []
       for (let i = 0; i < 20; i++) {
-				lists.push("item---"+i)
+        lists.push("item---" + i)
       }
       this.scrollData = lists
     },
 
     methods: {
-			onRefresherrefresh(_: RefresherEvent) {
+      onRefresherrefresh(_ : RefresherEvent) {
         this.refresherrefresh = true
         console.log("onRefresherrefresh--------------下拉刷新触发")
         this.refresherTriggered = true
@@ -40,28 +39,28 @@
         }, 1500)
 
       },
-			onRefresherabort(_: RefresherEvent) {
+      onRefresherabort(_ : RefresherEvent) {
         console.log("onRefresherabort------下拉刷新被中止")
       },
-			onRefresherrestore(_: RefresherEvent) {
+      onRefresherrestore(_ : RefresherEvent) {
         this.refresherrefresh = false
         console.log("onRefresherrestore------下拉刷新被复位")
       },
-			onRefresherpulling(e: RefresherEvent) {
-				console.log("onRefresherrestore------拉刷新控件被下拉-dy="+e.detail.dy)
+      onRefresherpulling(e : RefresherEvent) {
+        console.log("onRefresherrestore------拉刷新控件被下拉-dy=" + e.detail.dy)
       },
-			onScrolltolower(e: ScrollToLowerEvent) {
-				console.log("onScrolltolower 滚动到底部-----"+e.detail.direction)
+      onScrolltolower(e : ScrollToLowerEvent) {
+        console.log("onScrolltolower 滚动到底部-----" + e.detail.direction)
       }
     }
   };
 </script>
 
 <style>
-	.container{
+  .container {
     display: flex;
     flex-direction: column;
-		border:dashed;
+    border: dashed;
     flex: 1;
   }
 
@@ -76,21 +75,18 @@
   }
 
   .scroll-item {
-	    margin-left: 12rpx;
-	    margin-right: 12rpx;
-	    margin-top: 12rpx;
+    margin-left: 6px;
+    margin-right: 6px;
+    margin-top: 6px;
     background-color: #fff;
-	    border-radius: 8rpx;
+    border-radius: 4px;
   }
 
   .scroll-item-title {
-	    width:100%;
-	    height: 120rpx;
-	    line-height: 120rpx;
+    width: 100%;
+    height: 60px;
+    line-height: 60px;
     text-align: center;
     color: #555;
   }
-
-
-
 </style>

pages/component/scroll-view/scroll-view.uvue

 <template>
   <!-- #ifdef APP -->
-	<scroll-view style="flex: 1">
+  <scroll-view class="page-scroll-view">
   <!-- #endif -->
     <view>
       <page-head title="scroll-view,区域滚动视图"></page-head>
@@ -99,7 +99,7 @@
 
 <style>
   .scroll-Y {
-		height: 300rpx;
+    height: 150px;
   }
 
   .scroll-view_H {
@@ -108,24 +108,24 @@
   }
 
   .scroll-view-item {
-		height: 300rpx;
+    height: 150px;
     justify-content: center;
     align-items: center;
   }
 
   .scroll-view-item_H {
-		width: 690rpx;
-		height: 300rpx;
+    width: 100%;
+    height: 150px;
     justify-content: center;
     align-items: center;
   }
 
   .text {
-		font-size: 36rpx;
+    font-size: 18px;
     color: #ffffff;
   }
 
   .button {
-		margin-top: 30rpx;
+    margin-top: 15px;
   }
 </style>

pages/component/swiper/swiper.uvue

@@ -195,12 +195,6 @@
 </script>
 
 <style>
-  /* #ifdef APP */
-  .page-scroll-view {
-    flex: 1;
-  }
-  /* #endif */
-
   .swiper {
     height: 150px;
   }

pages/component/text/text-props.uvue

 <template>
-  <scroll-view style="flex: 1;">
+  <scroll-view class="page-scroll-view">
     <page-head :title="title"></page-head>
     <view class="uni-padding-wrap uni-common-mt">
       <view class="uni-title">
@@ -118,7 +118,6 @@ export default {
 .text-box {
   margin-bottom: 20px;
   padding: 20px 0;
-  display: flex;
   background-color: #ffffff;
   justify-content: center;
   align-items: center;

pages/component/video/video-format.uvue

 <template>
   <!-- #ifdef APP -->
-  <scroll-view style="flex: 1;">
+  <scroll-view class="page-scroll-view">
   <!-- #endif -->
     <page-head :title="title"></page-head>
     <view class="uni-padding-wrap uni-common-mt">
@@ -26,6 +26,11 @@
 </template>
 
 <script>
+  type VideoFormat = {
+    format : string
+    src : string
+  }
+
   export default {
     data() {
       return {
@@ -87,7 +92,7 @@
       }
     },
     methods: {
-      onError: function (format: string, e : VideoErrorEvent) {
+      onError: function (format : string, e : VideoErrorEvent) {
         console.log(format + ":" + JSON.stringify(e));
         if (format != "错误路径") {
           this.isError = true;
@@ -95,15 +100,10 @@
       }
     }
   }
-
-  type VideoFormat = {
-    format : string
-    src : string
-  }
 </script>
 
 <style>
   .video {
-    height: 400rpx;
+    height: 200px;
   }
 </style>