project init

components/scroll/index.scss

@@ -0,0 +1,300 @@
+@import "../../assets/css/variables";
+
+$refresh-height: 90rpx;
+$success-height: 70rpx;
+$success-top: $refresh-height - $success-height;
+$loading-color: #a5a5a5;
+
+.movable-area {
+  width: 100%;
+  height: 100vh;
+}
+
+.scroll {
+  width: 100%;
+  height: calc(100vh + #{$refresh-height});
+
+  &__view {
+    height: 100%;
+    position: relative;
+    box-sizing: border-box;
+  }
+
+  &__refresh {
+    height: $refresh-height;
+    position: relative;
+
+    &--hidden {
+      visibility: hidden;
+    }
+  }
+
+  &__bottom {
+    position: relative;
+    height: 40rpx;
+    padding: 40rpx 0;
+  }
+
+  &__loading {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    right: 0;
+    transform: translateY(-50%);
+    text-align: center;
+    color: #999999;
+    .text {
+      display: inline-block;
+      vertical-align: middle;
+      margin-left: 40rpx;
+    }
+  }
+}
+
+.success {
+  position: absolute;
+  z-index: 9;
+  top: $success-top;
+  left: 0;
+  width: 100%;
+  height: $success-height;
+  line-height: $success-height;
+  font-size: 24rpx;
+  text-align: center;
+  opacity: 0;
+	transform: scale(0);
+	color: $theme-color;
+
+  &:after {
+    content: " ";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: currentColor;
+    opacity: 0.7;
+    transform: scaleX(0);
+    transition: transform 0.3s ease-in-out;
+    z-index: 0;
+  }
+
+  & > .info {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+    color: #ffffff;
+  }
+
+  &--show {
+    opacity: 1;
+		transform: scale(1);
+
+    &:after {
+      transform: scaleX(1);
+    }
+  }
+
+  &--tran {
+    opacity: 0;
+		transform: translateY(-100%);
+    transition: opacity 0.35s linear, transform 0.35s linear;
+  }
+}
+
+
+.empty {
+  padding: 30rpx;
+  text-align: center;
+
+  &__image {
+    width: 200rpx;
+    height: 200rpx;
+    margin: 160rpx auto 60rpx;
+  }
+
+  &__text {
+    color: #999999;
+  }
+}
+
+.arrow {
+  position: relative;
+  border-radius: 4rpx;
+  width: 4rpx;
+  height: 30rpx;
+  background: $loading-color;
+  transition: transform 0.15s ease-in-out;
+  display: inline-block;
+  vertical-align: middle;
+
+  &:before {
+    position: absolute;
+    content: "";
+    bottom: -4rpx;
+    right: 50%;
+    width: 4rpx;
+    height: 16rpx;
+    transform: rotate(45deg);
+    transform-origin: 100% 100%;
+    background: $loading-color;
+    border-radius: 4rpx;
+  }
+
+  &:after {
+    position: absolute;
+    content: "";
+    bottom: -4rpx;
+    left: 50%;
+    width: 4rpx;
+    height: 16rpx;
+    transform: rotate(-45deg);
+    transform-origin: 0% 100%;
+    background: $loading-color;
+    border-radius: 4rpx;
+  }
+
+  &.rotate {
+    transform: rotate(-180deg);
+  }
+}
+
+.loading {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  width: 36rpx;
+  height: 36rpx;
+  margin-right: -14rpx;
+
+  &__item {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 36rpx;
+    height: 36rpx;
+
+    &:before {
+      content: "";
+      display: block;
+      margin: 0 auto;
+      width: 4rpx;
+      height: 8rpx;
+      background-color: $loading-color;
+      border-radius: 4rpx;
+      animation: fadeDelay 1.2s infinite ease-in-out both;
+    }
+
+    &:nth-child(2) {
+      transform: rotate(30deg);
+
+      &:before {
+        animation-delay: -1.1s;
+      }
+    }
+
+    &:nth-child(3) {
+      transform: rotate(60deg);
+
+      &:before {
+        animation-delay: -1s;
+      }
+    }
+
+    &:nth-child(4) {
+      transform: rotate(90deg);
+
+      &:before {
+        animation-delay: -0.9s;
+      }
+    }
+
+    &:nth-child(5) {
+      transform: rotate(120deg);
+
+      &:before {
+        animation-delay: -0.8s;
+      }
+    }
+
+    &:nth-child(6) {
+      transform: rotate(150deg);
+
+      &:before {
+        animation-delay: -0.7s;
+      }
+    }
+
+    &:nth-child(7) {
+      transform: rotate(180deg);
+
+      &:before {
+        animation-delay: -0.6s;
+      }
+    }
+
+    &:nth-child(8) {
+      transform: rotate(210deg);
+
+      &:before {
+        animation-delay: -0.5s;
+      }
+    }
+
+    &:nth-child(9) {
+      transform: rotate(240deg);
+
+      &:before {
+        animation-delay: -0.4s;
+      }
+    }
+
+    &:nth-child(10) {
+      transform: rotate(270deg);
+
+      &:before {
+        animation-delay: -0.3s;
+      }
+    }
+
+    &:nth-child(11) {
+      transform: rotate(300deg);
+
+      &:before {
+        animation-delay: -0.2s;
+      }
+    }
+
+    &:nth-child(12) {
+      transform: rotate(330deg);
+
+      &:before {
+        animation-delay: -0.1s;
+      }
+    }
+  }
+
+  @keyframes fadeDelay {
+    0%, 39%, 100% {
+      opacity: 0.2;
+    }
+    40% {
+      opacity: 1;
+    }
+  }
+
+  @-webkit-keyframes fadeDelay {
+    0%, 39%, 100% {
+      opacity: 0.2;
+    }
+    40% {
+      opacity: 1;
+    }
+  }
+}
+
+
+