swiper: 调整页面样式，rpx to px

pages/component/swiper/swiper.uvue

 <template>
   <!-- #ifdef APP -->
-	<scroll-view style="flex: 1">
+  <scroll-view class="page-scroll-view">
   <!-- #endif -->
     <view>
       <page-head title="swiper,可滑动视图"></page-head>
       <view class="uni-margin-wrap">
         <swiper class="swiper" :vertical="verticalSelect" :indicator-dots="dotsSelect" :autoplay="autoplaySelect"
-          :rebound="reboundSelect"
-					:interval="intervalSelect" :circular="circularSelect" :indicator-color="indicatorColor"
-					:indicator-active-color="indicatorColorActive" :disable-touch="disableTouchSelect" :current="currentVal"
-					:current-item-id="currentItemIdVal" @change="swiperChange" @transition="swiperTransition"
-					@animationfinish="swiperAnimationfinish">
+          :rebound="reboundSelect" :interval="intervalSelect" :circular="circularSelect"
+          :indicator-color="indicatorColor" :indicator-active-color="indicatorColorActive"
+          :disable-touch="disableTouchSelect" :current="currentVal" :current-item-id="currentItemIdVal"
+          @change="swiperChange" @transition="swiperTransition" @animationfinish="swiperAnimationfinish">
           <swiper-item item-id="A">
             <view class="swiper-item uni-bg-red"><text class="swiper-item-Text">A</text></view>
           </swiper-item>
@@ -23,55 +22,55 @@
         </swiper>
       </view>
       <view class="uni-list">
-				<view class="uni-list-cell uni-list-cell-pd">
+        <view class="uni-list-cell uni-list-cell-padding">
           <view class="uni-list-cell-db">是否显示面板指示点</view>
           <switch :checked="dotsSelect" @change="dotsChange" />
         </view>
-				<view class="uni-list-cell uni-list-cell-pd">
+        <view class="uni-list-cell uni-list-cell-padding">
           <view class="uni-list-cell-db">是否自动切换</view>
           <switch :checked="autoplaySelect" @change="autoplayChange" />
         </view>
-				<view class="uni-list-cell uni-list-cell-pd">
+        <view class="uni-list-cell uni-list-cell-padding">
           <view class="uni-list-cell-db">是否循环</view>
           <switch :checked="circularSelect" @change="circularChange" />
         </view>
-        <view class="uni-list-cell uni-list-cell-pd">
+        <view class="uni-list-cell uni-list-cell-padding">
           <view class="uni-list-cell-db">是否显示rebound效果</view>
           <switch :checked="reboundSelect" @change="reboundSelectChange" />
         </view>
-				<view class="uni-title">间隔时间(毫秒)</view>
-				<view>
+        <view class="uni-title uni-list-cell-padding">间隔时间(毫秒)</view>
+        <view class="uni-list-cell-padding">
           <slider @change="sliderChange" :value="1000" :min="500" :max="5000" :show-value="true" />
         </view>
-				<view class="uni-list-cell uni-list-cell-pd">
+        <view class="uni-list-cell uni-list-cell-padding">
           <view class="uni-list-cell-db">定制指示器颜色</view>
           <switch :checked="indicatorColorSelect" @change="indicatorColorChange" />
         </view>
-				<view class="uni-list-cell uni-list-cell-pd">
+        <view class="uni-list-cell uni-list-cell-padding">
           <view class="uni-list-cell-db">纵向</view>
           <switch :checked="verticalSelect" @change="verticalChange" />
         </view>
-				<view class="uni-list-cell uni-list-cell-pd">
+        <view class="uni-list-cell uni-list-cell-padding">
           <view class="uni-list-cell-db">指定current为最后一个元素</view>
           <switch :checked="currentSelect" @change="currentChange" />
         </view>
-				<view class="uni-list-cell uni-list-cell-pd">
+        <view class="uni-list-cell uni-list-cell-padding">
           <view class="uni-list-cell-db">指定current-item-id为最后一个元素</view>
           <switch :checked="currentItemIdSelect" @change="currentItemIdChange" />
         </view>
-				<view class="uni-list-cell uni-list-cell-pd">
+        <view class="uni-list-cell uni-list-cell-padding">
           <view class="uni-list-cell-db">禁止用户 touch 操作</view>
           <switch :checked="disableTouchSelect" @change="disableTouchChange" />
         </view>
-				<view class="uni-list-cell uni-list-cell-pd">
+        <view class="uni-list-cell uni-list-cell-padding">
           <view class="uni-list-cell-db">swiperTransition 是否打印</view>
           <switch :checked="swiperTransitionSelect" @change="swiperTransitionChange" />
         </view>
-				<view class="uni-list-cell uni-list-cell-pd">
+        <view class="uni-list-cell uni-list-cell-padding">
           <view class="uni-list-cell-db">swiperAnimationfinish 是否打印</view>
           <switch :checked="swiperAnimationfinishSelect" @change="swiperAnimationfinishChange" />
         </view>
-				<view class="uni-list-cell uni-list-cell-pd">
+        <view class="uni-list-cell uni-list-cell-padding">
           <view class="uni-list-cell-db">swiperChange 是否打印</view>
           <switch :checked="swiperChangeSelect" @change="swiperChangeChange" />
         </view>
@@ -81,13 +80,14 @@
   </scroll-view>
   <!-- #endif -->
 </template>
+
 <script>
   export default {
     data() {
       return {
         background: ['color1', 'color2', 'color3'],
         dotsSelect: false,
-        reboundSelect:false,
+        reboundSelect: false,
         autoplaySelect: false,
         circularSelect: false,
         indicatorColorSelect: false,
@@ -103,7 +103,7 @@
         swiperTransitionSelect: false,
         swiperAnimationfinishSelect: false,
         swiperChangeSelect: false,
-        currentValChange:0
+        currentValChange: 0
       }
     },
     methods: {
@@ -195,23 +195,24 @@
 </script>
 
 <style>
-	.uni-margin-wrap {
-		width: 690rpx;
-		width: 100%;
+  /* #ifdef APP */
+  .page-scroll-view {
+    flex: 1;
   }
+  /* #endif */
 
   .swiper {
-		height: 300rpx;
+    height: 150px;
   }
 
   .swiper-item {
     width: 100%;
-		height: 300rpx;
+    height: 150px;
   }
 
   .swiper-item-Text {
     width: 100%;
     text-align: center;
-		line-height: 300rpx;
+    line-height: 150px;
   }
 </style>