发布版本 0.8.5

commitlint.config.js

@@ -68,7 +68,8 @@ module.exports = {
         'SearchBar',
         'IndexList',
         'Behavior',
-        'CapsuleBar'
+        'CapsuleBar',
+        'Circle'
       ]
     ]
   }

dist/circle/index.json

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

dist/circle/index.wxml

@@ -0,0 +1,10 @@
+<view class="sector {{((displayPercent < 50 && displayPercent !== 0) || displayPercent === 100) ? 'sector1' : 'sector2'}}" style="height:{{outerDiameter}}rpx;width:{{outerDiameter}}rpx;{{((displayPercent < 50 && displayPercent !== 0) || displayPercent === 100) ?activeColor?'background:'+activeColor:'':'background:'+backgroundColor}}">
+    <view wx:if="{{displayPercent !== 0 && displayPercent !== 100}}" class="sx1" style="height:{{outerDiameter}}rpx;width:{{outerDiameter}}rpx;clip: rect(0rpx, {{outerDiameter/2}}rpx, {{outerDiameter}}rpx, 0rpx);background:{{((displayPercent < 50 && displayPercent !== 0) || displayPercent === 100) ?backgroundColor:activeColor?activeColor:''}}"></view>
+    <view wx:if="{{displayPercent !== 50 && displayPercent !== 0 && displayPercent !== 100}}" class="sx2" style="transform: rotate({{displayPercent < 50 ? ((360 * displayPercent / 100) - 180):(360 * (displayPercent - 100) / 100)}}deg);height:{{outerDiameter}}rpx;width:{{outerDiameter}}rpx;clip: rect(0rpx, {{outerDiameter/2}}rpx, {{outerDiameter}}rpx, 0rpx);background:{{((displayPercent < 50 && displayPercent !== 0) || displayPercent === 100) ?backgroundColor:activeColor}}"></view>
+    <view class="sx_t" style="width:{{innerDiameter}}rpx;height:{{innerDiameter}}rpx;background:{{innerColor}}">
+        <view wx:if="{{showValue}}" class="l-value-class" style="color:{{valueColor?valueColor:''}};font-size:{{valueSize}}rpx">
+            {{displayPercent}}%
+        </view>
+        <slot></slot>
+    </view>
+</view>

dist/circle/index.wxss

@@ -0,0 +1 @@
+.sector{position:relative;border-radius:50%;overflow:hidden;display:flex;justify-content:center;align-items:center}.sx1,.sx2{position:absolute;top:0;left:0}.sx1{z-index:1}.sx2{z-index:2}.sx_t{border-radius:50%;z-index:3;display:flex;flex-direction:row;justify-content:center;align-items:center}.sector1{background:#3963bc}.sector2 .sx1,.sector2 .sx2{background:#3963bc;transform:rotate(180deg)}

dist/price/index.wxml

@@ -2,5 +2,5 @@
 
   <text class="l-unit-class" style="color: {{unitColor?unitColor:color}}; font-size: {{unitSize?unitSize:size}}rpx; font-weight: {{unitBold?unitBold:bold}}">{{unit}}</text>
 
-  <text class="l-value-class" style="color: {{valueColor?valueColor:color}}; font-size: {{valueSize?valueSize:size}}rpx; font-weight: {{valueBold?valueBold:bold}}">{{result}}</text>
-</view>
+  <text class="l-value-class" style="color: {{valueColor?valueColor:color}}; font-size: {{valueSize?valueSize:size}}rpx; font-weight: {{valueBold?valueBold:bold}}">{{priceInteger}}<text class="l-dot-class">{{priceDecimal?'.':''}}</text><text class="l-decimal-class">{{priceDecimal?priceDecimal:''}}</text></text>
+</view>

examples/app.json

@@ -64,7 +64,8 @@
         "pages/steps/index",
         "pages/skeleton/index",
         "pages/progress/index",
-        "pages/arc-popup/index"
+        "pages/arc-popup/index",
+        "pages/circle/index"
       ]
     },
     {

examples/dist/circle/index.js

@@ -0,0 +1,133 @@
+// miniprogram_npm/lin-ui/circle/index.js
+Component({
+  /**
+   * 组件的属性列表
+   */
+  externalClasses: ['l-value-class'],
+  properties: {
+    percent: {
+      type: Number,
+      value: 0
+    },
+    outerDiameter: {
+      type: Number,
+      value: 220
+    },
+    innerDiameter: {
+      type: Number,
+      value: 170
+    },
+    activeColor: {
+      type: String
+    },
+    backgroundColor: {
+      type: String,
+      value: '#EBEBEB',
+    },
+    innerColor: {
+      type: String,
+      value: '#FFFFFF',
+    },
+    active: {
+      type: Boolean,
+      value: false
+    },
+    duration: {
+      type: Number,
+      value: 30
+    },
+    showValue: {
+      type: Boolean,
+      value: false
+    },
+    valueColor: {
+      type: String,
+    },
+    valueSize: {
+      type: Number,
+      value: 25
+    }
+  },
+
+  options: {
+    multipleSlots: true,
+    pureDataPattern: /^_/ // 指定所有 _ 开头的数据字段为纯数据字段
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    displayPercent: 0,
+  },
+
+  observers: {
+    'percent': async function (percent) {
+      if (percent > 100) {
+        this.setData({
+          percent: 100
+        });
+        return;
+      }
+      if (percent < 0) {
+        this.setData({
+          percent: 0
+        });
+        return;
+      }
+      if (this.data.active) {
+        let displayPercent = this.data.displayPercent;
+
+        if (displayPercent < percent) {
+          while (displayPercent < percent) {
+            await this.sleep(this.data.duration);
+            displayPercent += 1;
+            this.setData({
+              displayPercent: displayPercent
+            });
+          }
+        } else if (displayPercent > percent) {
+          while (displayPercent > percent) {
+            await this.sleep(this.data.duration);
+            displayPercent -= 1;
+            this.setData({
+              displayPercent
+            });
+          }
+        }
+      } else {
+        this.setData({
+          displayPercent: percent
+        });
+      }
+    },
+
+    'outerDiameter': function (outerDiameter) {
+      if (outerDiameter < this.data.innerDiameter) {
+        outerDiameter = this.data.innerDiameter;
+        this.setData({
+          outerDiameter
+        });
+      }
+    },
+
+    'innerDiameter': function (innerDiameter) {
+      if (innerDiameter < 0) {
+        this.setData({
+          innerDiameter: 0
+        });
+      }
+    }
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    sleep(milSec) {
+      return new Promise(resolve => {
+        setTimeout(resolve, milSec);
+      });
+    }
+  }
+});

examples/dist/circle/index.json

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