小程序源码

source/wx/xzs-student/component/iView/progress/index.js

@@ -0,0 +1,23 @@
+Component({
+    externalClasses: ['i-class'],
+
+    properties: {
+        percent: {
+            type: Number,
+            value: 0
+        },
+        // normal || active || wrong || success
+        status: {
+            type: String,
+            value: 'normal'
+        },
+        strokeWidth: {
+            type: Number,
+            value: 10
+        },
+        hideInfo: {
+            type: Boolean,
+            value: false
+        }
+    }
+});

source/wx/xzs-student/component/iView/progress/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

source/wx/xzs-student/component/iView/progress/index.wxml

@@ -0,0 +1,10 @@
+<view class="i-class i-progress i-progress-{{ status }} {{ !hideInfo ? 'i-progress-show-info' : '' }}">
+    <view class="i-progress-outer">
+        <view class="i-progress-inner">
+            <view class="i-progress-bg" style="width: {{percent}}%;height: {{strokeWidth}}px"></view>
+        </view>
+    </view>
+    <view class="i-progress-text" wx:if="{{ !hideInfo }}">
+        <view class="i-progress-text-inner">{{ percent }}%</view>
+    </view>
+</view>

source/wx/xzs-student/component/iView/progress/index.wxss

@@ -0,0 +1 @@
+.i-progress{display:inline-block;width:100%;font-size:12px;position:relative}.i-progress-outer{display:inline-block;width:100%;margin-right:0;padding-right:0;box-sizing:border-box}.i-progress-show-info .i-progress-outer{padding-right:55px;margin-right:-55px}.i-progress-inner{display:inline-block;width:100%;background-color:#f3f3f3;border-radius:100px;vertical-align:middle}.i-progress-bg{border-radius:100px;background-color:#2db7f5;transition:all .2s linear;position:relative}.i-progress-text{display:inline-block;margin-left:5px;text-align:left;font-size:1em;vertical-align:middle}.i-progress-active .i-progress-bg:before{content:'';opacity:0;position:absolute;top:0;left:0;right:0;bottom:0;background:#fff;border-radius:10px;animation:i-progress-active 2s ease-in-out infinite}.i-progress-wrong .i-progress-bg{background-color:#ed3f14}.i-progress-wrong .i-progress-text{color:#ed3f14}.i-progress-success .i-progress-bg{background-color:#19be6b}.i-progress-success .i-progress-text{color:#19be6b}@keyframes i-progress-active{0%{opacity:.3;width:0}100%{opacity:0;width:100%}}