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

pages/component/swiper/swiper.uvue

 <template>
-	<!-- #ifdef APP -->
-	<scroll-view style="flex: 1">
-		<!-- #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">
-					<swiper-item item-id="A">
-						<view class="swiper-item uni-bg-red"><text class="swiper-item-Text">A</text></view>
-					</swiper-item>
-					<swiper-item item-id="B">
-						<view class="swiper-item uni-bg-green"><text class="swiper-item-Text">B</text></view>
-					</swiper-item>
-					<swiper-item item-id="C">
-						<view class="swiper-item uni-bg-blue"><text class="swiper-item-Text">C</text></view>
-					</swiper-item>
-				</swiper>
-			</view>
-			<view class="uni-list">
-				<view class="uni-list-cell uni-list-cell-pd">
-					<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-db">是否自动切换</view>
-					<switch :checked="autoplaySelect" @change="autoplayChange" />
-				</view>
-				<view class="uni-list-cell uni-list-cell-pd">
-					<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-db">是否显示rebound效果</view>
-        	<switch :checked="reboundSelect" @change="reboundSelectChange" />
+  <!-- #ifdef APP -->
+  <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">
+          <swiper-item item-id="A">
+            <view class="swiper-item uni-bg-red"><text class="swiper-item-Text">A</text></view>
+          </swiper-item>
+          <swiper-item item-id="B">
+            <view class="swiper-item uni-bg-green"><text class="swiper-item-Text">B</text></view>
+          </swiper-item>
+          <swiper-item item-id="C">
+            <view class="swiper-item uni-bg-blue"><text class="swiper-item-Text">C</text></view>
+          </swiper-item>
+        </swiper>
+      </view>
+      <view class="uni-list">
+        <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-title">间隔时间(毫秒)</view>
-				<view>
-					<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-db">定制指示器颜色</view>
-					<switch :checked="indicatorColorSelect" @change="indicatorColorChange" />
-				</view>
-				<view class="uni-list-cell uni-list-cell-pd">
-					<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-db">指定current为最后一个元素</view>
-					<switch :checked="currentSelect" @change="currentChange" />
-				</view>
-				<view class="uni-list-cell uni-list-cell-pd">
-					<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-db">禁止用户 touch 操作</view>
-					<switch :checked="disableTouchSelect" @change="disableTouchChange" />
-				</view>
-				<view class="uni-list-cell uni-list-cell-pd">
-					<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-db">swiperAnimationfinish 是否打印</view>
-					<switch :checked="swiperAnimationfinishSelect" @change="swiperAnimationfinishChange" />
-				</view>
-				<view class="uni-list-cell uni-list-cell-pd">
-					<view class="uni-list-cell-db">swiperChange 是否打印</view>
-					<switch :checked="swiperChangeSelect" @change="swiperChangeChange" />
-				</view>
-			</view>
-		</view>
-		<!-- #ifdef APP -->
-	</scroll-view>
-	<!-- #endif -->
+        <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-padding">
+          <view class="uni-list-cell-db">是否循环</view>
+          <switch :checked="circularSelect" @change="circularChange" />
+        </view>
+        <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 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-padding">
+          <view class="uni-list-cell-db">定制指示器颜色</view>
+          <switch :checked="indicatorColorSelect" @change="indicatorColorChange" />
+        </view>
+        <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-padding">
+          <view class="uni-list-cell-db">指定current为最后一个元素</view>
+          <switch :checked="currentSelect" @change="currentChange" />
+        </view>
+        <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-padding">
+          <view class="uni-list-cell-db">禁止用户 touch 操作</view>
+          <switch :checked="disableTouchSelect" @change="disableTouchChange" />
+        </view>
+        <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-padding">
+          <view class="uni-list-cell-db">swiperAnimationfinish 是否打印</view>
+          <switch :checked="swiperAnimationfinishSelect" @change="swiperAnimationfinishChange" />
+        </view>
+        <view class="uni-list-cell uni-list-cell-padding">
+          <view class="uni-list-cell-db">swiperChange 是否打印</view>
+          <switch :checked="swiperChangeSelect" @change="swiperChangeChange" />
+        </view>
+      </view>
+    </view>
+  <!-- #ifdef APP -->
+  </scroll-view>
+  <!-- #endif -->
 </template>
+
 <script>
-	export default {
-		data() {
-			return {
-				background: ['color1', 'color2', 'color3'],
-				dotsSelect: false,
-        reboundSelect:false,
-				autoplaySelect: false,
-				circularSelect: false,
-				indicatorColorSelect: false,
-				verticalSelect: false,
-				currentSelect: false,
-				currentItemIdSelect: false,
-				intervalSelect: 2000,
-				indicatorColor: "",
-				indicatorColorActive: "",
-				currentVal: 0,
-				currentItemIdVal: "",
-				disableTouchSelect: false,
-				swiperTransitionSelect: false,
-				swiperAnimationfinishSelect: false,
-				swiperChangeSelect: false,
-        currentValChange:0
-			}
-		},
-		methods: {
+  export default {
+    data() {
+      return {
+        background: ['color1', 'color2', 'color3'],
+        dotsSelect: false,
+        reboundSelect: false,
+        autoplaySelect: false,
+        circularSelect: false,
+        indicatorColorSelect: false,
+        verticalSelect: false,
+        currentSelect: false,
+        currentItemIdSelect: false,
+        intervalSelect: 2000,
+        indicatorColor: "",
+        indicatorColorActive: "",
+        currentVal: 0,
+        currentItemIdVal: "",
+        disableTouchSelect: false,
+        swiperTransitionSelect: false,
+        swiperAnimationfinishSelect: false,
+        swiperChangeSelect: false,
+        currentValChange: 0
+      }
+    },
+    methods: {
 
-			swiperChange: function (e : SwiperChangeEvent) {
-        this.currentValChange = e.detail.current
-        console.log(this.currentValChange)
-				if (this.swiperChangeSelect) {
-					console.log("swiperChange")
-					console.log(e)
-				}
-			},
-			swiperTransition: function (e : SwiperTransitionEvent) {
-				if (this.swiperTransitionSelect) {
-					console.log("swiperTransition")
-					console.log(e)
-				}
-			},
-			swiperAnimationfinish: function (e : SwiperAnimationFinishEvent) {
-				if (this.swiperAnimationfinishSelect) {
-					console.log("swiperAnimationfinish")
-					console.log(e)
-				}
-			},
+      swiperChange: function (e : SwiperChangeEvent) {
+        this.currentValChange = e.detail.current
+        console.log(this.currentValChange)
+        if (this.swiperChangeSelect) {
+          console.log("swiperChange")
+          console.log(e)
+        }
+      },
+      swiperTransition: function (e : SwiperTransitionEvent) {
+        if (this.swiperTransitionSelect) {
+          console.log("swiperTransition")
+          console.log(e)
+        }
+      },
+      swiperAnimationfinish: function (e : SwiperAnimationFinishEvent) {
+        if (this.swiperAnimationfinishSelect) {
+          console.log("swiperAnimationfinish")
+          console.log(e)
+        }
+      },
 
-			dotsChange: function (e : SwitchChangeEvent) {
-				this.dotsSelect = e.detail.value
-			},
-			swiperTransitionChange: function (e : SwitchChangeEvent) {
-				this.swiperTransitionSelect = e.detail.value
-			},
-			swiperChangeChange: function (e : SwitchChangeEvent) {
-				this.swiperChangeSelect = e.detail.value
-			},
-			swiperAnimationfinishChange: function (e : SwitchChangeEvent) {
-				this.swiperAnimationfinishSelect = e.detail.value
-			},
-			autoplayChange: function (e : SwitchChangeEvent) {
-				this.autoplaySelect = e.detail.value
-			},
-			verticalChange: function (e : SwitchChangeEvent) {
-				this.verticalSelect = e.detail.value
-			},
-			disableTouchChange: function (e : SwitchChangeEvent) {
-				this.disableTouchSelect = e.detail.value
-			},
-			currentItemIdChange: function (e : SwitchChangeEvent) {
-				this.currentItemIdSelect = e.detail.value
-				if (this.currentItemIdSelect) {
-					this.currentItemIdVal = 'C'
-				} else {
-					this.currentItemIdVal = 'A'
-				}
-			},
-			currentChange: function (e : SwitchChangeEvent) {
-				this.currentSelect = e.detail.value
-				if (this.currentSelect) {
-					this.currentVal = 2
-				} else {
-					this.currentVal = 0
-				}
+      dotsChange: function (e : SwitchChangeEvent) {
+        this.dotsSelect = e.detail.value
+      },
+      swiperTransitionChange: function (e : SwitchChangeEvent) {
+        this.swiperTransitionSelect = e.detail.value
+      },
+      swiperChangeChange: function (e : SwitchChangeEvent) {
+        this.swiperChangeSelect = e.detail.value
+      },
+      swiperAnimationfinishChange: function (e : SwitchChangeEvent) {
+        this.swiperAnimationfinishSelect = e.detail.value
+      },
+      autoplayChange: function (e : SwitchChangeEvent) {
+        this.autoplaySelect = e.detail.value
+      },
+      verticalChange: function (e : SwitchChangeEvent) {
+        this.verticalSelect = e.detail.value
+      },
+      disableTouchChange: function (e : SwitchChangeEvent) {
+        this.disableTouchSelect = e.detail.value
+      },
+      currentItemIdChange: function (e : SwitchChangeEvent) {
+        this.currentItemIdSelect = e.detail.value
+        if (this.currentItemIdSelect) {
+          this.currentItemIdVal = 'C'
+        } else {
+          this.currentItemIdVal = 'A'
+        }
+      },
+      currentChange: function (e : SwitchChangeEvent) {
+        this.currentSelect = e.detail.value
+        if (this.currentSelect) {
+          this.currentVal = 2
+        } else {
+          this.currentVal = 0
+        }
 
-			},
-			circularChange: function (e : SwitchChangeEvent) {
-				this.circularSelect = e.detail.value
-				console.log(this.circularSelect)
-			},
-      reboundSelectChange: function (e : SwitchChangeEvent) {
-      	this.reboundSelect = e.detail.value
-      	console.log(this.reboundSelect)
       },
-			sliderChange(e : SliderChangeEvent) {
-				this.intervalSelect = e.detail.value
-			},
-			indicatorColorChange(e : SwitchChangeEvent) {
-				this.indicatorColorSelect = e.detail.value
-				if (this.indicatorColorSelect) {
-					// 选择了定制指示器颜色
-					this.indicatorColor = "#ff00ff"
-					this.indicatorColorActive = "#0000ff"
-				} else {
-					// 没有选择颜色
-					this.indicatorColor = ""
-					this.indicatorColorActive = ""
-				}
-			}
-		}
-	}
+      circularChange: function (e : SwitchChangeEvent) {
+        this.circularSelect = e.detail.value
+        console.log(this.circularSelect)
+      },
+      reboundSelectChange: function (e : SwitchChangeEvent) {
+        this.reboundSelect = e.detail.value
+        console.log(this.reboundSelect)
+      },
+      sliderChange(e : SliderChangeEvent) {
+        this.intervalSelect = e.detail.value
+      },
+      indicatorColorChange(e : SwitchChangeEvent) {
+        this.indicatorColorSelect = e.detail.value
+        if (this.indicatorColorSelect) {
+          // 选择了定制指示器颜色
+          this.indicatorColor = "#ff00ff"
+          this.indicatorColorActive = "#0000ff"
+        } else {
+          // 没有选择颜色
+          this.indicatorColor = ""
+          this.indicatorColorActive = ""
+        }
+      }
+    }
+  }
 </script>
 
-<style>
-	.uni-margin-wrap {
-		width: 690rpx;
-		width: 100%;
-	}
+<style>
+  /* #ifdef APP */
+  .page-scroll-view {
+    flex: 1;
+  }
+  /* #endif */
 
-	.swiper {
-		height: 300rpx;
-	}
+  .swiper {
+    height: 150px;
+  }
 
-	.swiper-item {
-		width: 100%;
-		height: 300rpx;
-	}
+  .swiper-item {
+    width: 100%;
+    height: 150px;
+  }
 
-	.swiper-item-Text {
-		width: 100%;
-		text-align: center;
-		line-height: 300rpx;
-	}
+  .swiper-item-Text {
+    width: 100%;
+    text-align: center;
+    line-height: 150px;
+  }
 </style>