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

efec8371 · hdx · 235afad0 · efec8371
显示空白变更内容
内联并排

Showing with 217 addition and 226 deletion

pages/component/scroll-view/scroll-view-props.uvue pages/component/scroll-view/scroll-view-props.uvue +217 -226

未找到文件。
--- a/pages/component/scroll-view/scroll-view-props.uvue
+++ b/pages/component/scroll-view/scroll-view-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。 -->
      <scroll-view v-if="scrollX" direction="horizontal" :scroll-top="scrollTop" :scroll-left="scrollLeft"
        :upper-threshold="upperThreshold" :lower-threshold="lowerThreshold" :scroll-into-view="scrollIntoView"
-				:enable-back-to-top="enableBackToTop" :scroll-with-animation="scrollWithAnimation" style="flex-direction: row;width: 100%;height: 100%;"
+        :enable-back-to-top="enableBackToTop" :scroll-with-animation="scrollWithAnimation"
-				:show-scrollbar="showScrollbar" :bounces="bounces" @scrolltoupper="scrolltoupper"
+        style="flex-direction: row;width: 100%;height: 100%;" :show-scrollbar="showScrollbar" :bounces="bounces"
-				@scrolltolower="scrolltolower" @scroll="scroll" @scrollend="scrollend" ref="scrollViewX" id="scrollViewX">
+        @scrolltoupper="scrolltoupper" @scrolltolower="scrolltolower" @scroll="scroll" @scrollend="scrollend"
+        ref="scrollViewX" id="scrollViewX">
        <view class="item" :id="'horizontal_'+item.id" v-for="(item,_) in items">
          <text class="uni-text">{{item.label}}</text>
        </view>
@@ -15,70 +16,65 @@
      <scroll-view v-else direction="vertical" :scroll-top="scrollTop" :scroll-left="scrollLeft"
        :upper-threshold="upperThreshold" :lower-threshold="lowerThreshold" :scroll-into-view="scrollIntoView"
        :enable-back-to-top="enableBackToTop" :scroll-with-animation="scrollWithAnimation"
-				:show-scrollbar="showScrollbar" :bounces="bounces" @scrolltoupper="scrolltoupper"
+        :show-scrollbar="showScrollbar" :bounces="bounces" @scrolltoupper="scrolltoupper" @touchmove="onTouchMove"
-				@touchmove="onTouchMove"
+        @scrolltolower="scrolltolower" @scroll="scroll" @scrollend="scrollend" ref="scrollViewY" id="scrollViewY"
-				@scrolltolower="scrolltolower" @scroll="scroll" @scrollend="scrollend" ref="scrollViewY" id="scrollViewY" style="width: 100%;height: 100%;">
+        style="width: 100%;height: 100%;">
        <view class="item" :id="item.id" v-for="(item,_) in items">
          <text class="uni-text">{{item.label}}</text>
        </view>
      </scroll-view>
    </view>
-		<scroll-view class="uni-list" showScrollbar="true" scroll-y="true">
+    <scroll-view class="uni-list" :showScrollbar="true" :scroll-y="true">
-			<view class="uni-option">
+      <view class="uni-list-cell uni-list-cell-padding">
        <text>是否显示滚动条</text>
        <switch :checked="showScrollbar" @change="showScrollbar=!showScrollbar"></switch>
      </view>
-			<view class="uni-option">
+      <view class="uni-list-cell uni-list-cell-padding">
        <text>是否有反弹效果</text>
        <switch :checked="bounces" @change="bounces=!bounces"></switch>
      </view>
-			<view class="uni-option">
+      <view class="uni-list-cell uni-list-cell-padding">
        <text>是否开启滚动时使用动画过渡</text>
        <switch :checked="scrollWithAnimation" @change="scrollWithAnimation=!scrollWithAnimation"></switch>
      </view>
-			<view class="uni-option">
+      <view class="uni-list-cell uni-list-cell-padding">
        <text>是否横向滚动</text>
        <switch :checked="scrollX" @change="changeDirectionX"></switch>
      </view>
-			<view class="uni-option">
+      <view class="uni-list-cell uni-list-cell-padding">
        <text>是否竖向滚动</text>
        <switch :checked="scrollY" @change="changeDirectionY"></switch>
      </view>
-			<view class="uni-common-pb"></view>
+      <view class="uni-slider uni-list-cell-padding">
-			<view class="uni-slider">
        <text>拖动设置scroll-top</text>
-				<slider :max="1000" :min="0" :step="10" :value="scrollTop" :show-value="true"
-					@change="handleChangeScrollTop" style="margin-top: 10rpx;" />
      </view>
-			<view class="uni-common-pb"></view>
+      <view class="uni-slider uni-list-cell-padding">
-			<view class="uni-slider">
+        <slider :max="1000" :min="0" :step="10" :value="scrollTop" :show-value="true" @change="handleChangeScrollTop" />
+      </view>
+      <view class="uni-slider uni-list-cell-padding">
        <text>拖动设置scroll-left</text>
+      </view>
+      <view class="uni-slider uni-list-cell-padding">
        <slider :max="1000" :min="0" :step="10" :value="scrollLeft" :show-value="true"
-					@change="handleChangeScrollLeft" style="margin-top: 10rpx;" />
+          @change="handleChangeScrollLeft" />
      </view>
+      <view class="uni-list-cell uni-list-cell-padding">
-			<view class="uni-option">
        <text>设置触发scrolltoupper的距离</text>
-				<input style="width: 100rpx;border-width: 2rpx;text-align: center;border-style: solid; " :value="upperThreshold"
+        <input class="uni-list-cell-input" type="number" :value="upperThreshold" @input="handleUpperThresholdInput" />
-					type="number" @input="handleUpperThresholdInput" />
      </view>
+      <view class="uni-list-cell uni-list-cell-padding">
-			<view class="uni-option">
        <text>设置触发scrolltolower的距离</text>
-				<input style="width: 100rpx;border-width: 2rpx;text-align: center;border-style: solid; " :value="lowerThreshold"
+        <input class="uni-list-cell-input" type="number" :value="lowerThreshold" @input="handleLowerThresholdInput" />
-					type="number" @input="handleLowerThresholdInput" />
      </view>
+      <view class="uni-list-cell uni-list-cell-padding">
-			<view class="uni-common-pb"></view>
-			<view class="uni-slider">
        <button type="primary" class="button" @click="handleScrollIntoView">
          滚动到id为`item3`的子视图
        </button>
      </view>
-			<view class="uni-common-pb"></view>
+      <view class="uni-list-cell uni-list-cell-padding">
+      </view>
    </scroll-view>
  </view>
 </template>
@@ -123,7 +119,7 @@
      },
      changeDirectionX() {
        this.scrollX = !this.scrollX;
-				if(this.scrollX) {
+        if (this.scrollX) {
          this.scrollY = false
        }
        this.scrollTop = 0;
@@ -131,7 +127,7 @@
      },
      changeDirectionY() {
        this.scrollY = !this.scrollY;
-				if(this.scrollY) {
+        if (this.scrollY) {
          this.scrollX = false
        }
        this.scrollTop = 0;
@@ -181,24 +177,24 @@
        console.log("TouchMove");
      },
      //自动化测试专用
-      checkScrollHeight(): Boolean {
+      checkScrollHeight() : Boolean {
        var element = this.$refs["scrollViewY"]
-        if(element != null) {
+        if (element != null) {
          var scrollHeight = (element as Element).scrollHeight
-           console.log("checkScrollHeight"+scrollHeight)
+          console.log("checkScrollHeight" + scrollHeight)
-           if(scrollHeight > 1900) {
+          if (scrollHeight > 1900) {
            return true
          }
        }
        return false
      },
      //自动化测试专用
-      checkScrollWidth(): Boolean {
+      checkScrollWidth() : Boolean {
        var element = this.$refs["scrollViewX"]
-        if(element != null) {
+        if (element != null) {
          var scrollWidth = (element as Element).scrollWidth
-           console.log("checkScrollWidth---"+scrollWidth)
+          console.log("checkScrollWidth---" + scrollWidth)
-           if(scrollWidth > 1900) {
+          if (scrollWidth > 1900) {
            return true
          }
        }
@@ -210,18 +206,17 @@
 <style>
  .uni-margin-wrap {
-		height: 400rpx;
+    height: 200px;
-		margin-left: 50rpx;
+    margin: 0 25px 25px 25px;
-		margin-right: 50rpx;
  }
  .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;
  }
@@ -231,21 +226,17 @@
    font-size: 50px;
  }
-	.uni-list {
+  .uni-slider {
-		flex: 1;
+    justify-content: center;
-		margin: 50rpx 50rpx 0rpx 50rpx;
  }
-	.uni-option {
+  .uni-list-cell-input {
-		height: 100rpx;
+    width: 50px;
-		flex-direction: row;
+    border: 1px solid #ccc;
-		justify-content: space-between;
+    text-align: center;
-		align-items: center;
-		padding: 20rpx;
  }
-	.uni-slider {
+  .button {
-		padding: 30rpx;
+    flex: 1;
-		justify-content: center;
  }
 </style>