feat(progress): 新增 Progress 组件 (#789)

* feat(Progress): 新增 Progress 组件

* refactor(Example): 增加示例小程序中的组件 Icon

1. 新增 LoadMore 组件 Icon
2. 新增 Skeleton 组件 Icon
3. 新增 Steps 组件 Icon
4. 新增 Sticky 组件 Icon

Co-authored-by: 桔子 <[email protected]>

Author: zhc525349965

config/styles/_base.less

@@ -89,3 +89,5 @@
 @transition-time        : .2s;
 @ease-in-out            : ease-in-out;
 
+// Progress
+@progress-active-color : @theme-color;

dist/progress/index.js

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

dist/progress/index.json

@@ -0,0 +1,16 @@
+
+<view class="container l-class">
+    <view class="text l-text-class" wx:if="{{showInfo && textPosition==='left'}}" style="color:{{textColor?textColor:''}};margin-right:{{interval}}rpx">
+        {{percent}}%
+    </view>
+    <view class="progress short" style="height:{{strokeWidth}}rpx;">
+        <view class="slot" style="margin-left:{{marginLeft}}rpx;margin-top:{{marginTop}}rpx;">
+            <slot name="header"></slot>
+        </view>
+        <view class="percent {{activeColor?'':'active'}} l-active-class" style="width:{{percent}}%;height:{{strokeWidth}}rpx;border-radius:{{borderRadius}}rpx;{{activeColor?'background-color:'+activeColor+';':''}}"></view>
+        <view class="background l-background-class" style="height:{{strokeWidth}}rpx;border-radius:{{borderRadius}}rpx;background-color:{{backgroundColor}};"></view>
+    </view>
+    <view class="text l-text-class" wx:if="{{showInfo && textPosition==='right'}}" style="color:{{textColor?textColor:''}};margin-left:{{interval}}rpx">
+        {{percent}}%
+    </view>
+</view>

dist/progress/index.wxml

@@ -0,0 +1 @@
+.container{display:flex;flex-direction:row;align-items:center}.progress{position:relative;width:100%;transition:all .25s ease-in-out}.percent{position:absolute;z-index:1}.active{background-color:#3963bc}.text{color:#3963bc;font-size:30rpx}.background{position:absolute;width:100%}.header{position:absolute!important;z-index:2}.slot{position:absolute;z-index:2}

dist/progress/index.wxss

@@ -65,7 +65,8 @@
         "pages/loadmore/index",
         "pages/loadmore/case/index",
         "pages/steps/index",
-        "pages/skeleton/index"
+        "pages/skeleton/index",
+        "pages/progress/index"
       ]
     },
     {
@@ -140,4 +141,4 @@
     "content-card": "/components/content-card/index"
   },
   "sitemapLocation": "sitemap.json"
-}
+}

examples/app.json

@@ -0,0 +1,137 @@
+// components/progress/index.js
+import {
+  px2rpx
+} from '../utils/util.js';
+import validator from '../behaviors/validator';
+Component({
+  /**
+   * 组件的属性列表
+   */
+  externalClasses: ['l-class', 'l-text-class', 'l-active-class', 'l-background-class'],
+  behaviors: [validator],
+  properties: {
+    percent: {
+      type: Number,
+      value: 0,
+    },
+    strokeWidth: {
+      type: Number,
+      value: 12
+    },
+    borderRadius: {
+      type: Number,
+      value: 6,
+    },
+    activeColor: {
+      type: String,
+    },
+    backgroundColor: {
+      type: String,
+      value: '#EBEBEB',
+    },
+    showInfo: {
+      type: Boolean,
+      value: false
+    },
+    textPosition: {
+      type: String,
+      value: 'right',
+      options: ['left', 'right']
+    },
+    textColor: {
+      type: String,
+    },
+    interval: {
+      type: Number,
+      value: 20,
+    },
+    active: {
+      type: Boolean,
+      value: false
+    },
+    duration: {
+      type: Number,
+      value: 30
+    }
+  },
+
+  options: {
+    multipleSlots: true,
+    pureDataPattern: /^_/ // 指定所有 _ 开头的数据字段为纯数据字段
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    _slotWidth: 0,
+    _slotHeight: 0,
+    _progressWidth: 0,
+    _progressHeight: 0,
+    _marginBottom: 0,
+    marginLeft: 0,
+    marginTop: 0,
+    _useSlot: false,
+  },
+
+  observers: {
+    '_slotWidth, _slotHeight, _progressWidth, _progressHeight, percent,_useSlot': function (_slotWidth, _slotHeight, _progressWidth, _progressHeight, percent, _useSlot) {
+      if (_useSlot) {
+        const marginTop = -(_slotHeight - _progressHeight) / 2;
+        const marginLeft = (_progressWidth - _slotWidth) * percent / 100;
+        this.setData({
+          marginTop,
+          marginLeft
+        });
+      }
+    }
+  },
+
+  lifetimes: {
+    attached() {
+      if (this.data.percent > 100) {
+        this.setData({
+          percent: 100
+        });
+      }
+
+      const querySlot = wx.createSelectorQuery().in(this);
+      querySlot.select('.slot').boundingClientRect(res => {
+        let _useSlot = this.data._useSlot;
+        if (res.width) {
+          _useSlot = true;
+        }
+        this.setData({
+          _useSlot,
+          _slotWidth: px2rpx(res.width),
+          _slotHeight: px2rpx(res.height)
+        });
+      }).exec();
+      const queryProgress = wx.createSelectorQuery().in(this);
+      queryProgress.select('.progress').boundingClientRect(res => {
+        this.setData({
+          _progressHeight: px2rpx(res.height),
+          _progressWidth: px2rpx(res.width)
+        });
+      }).exec();
+
+      const percent = this.data.percent;
+      let now = 0;
+      if (this.data.active) {
+        setInterval(() => {
+          if (now < percent) {
+            now += 1;
+            this.setData({
+              percent: now
+            });
+          }
+        }, this.data.duration);
+      }
+    },
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {}
+});

examples/dist/progress/index.js

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

examples/dist/progress/index.json

@@ -0,0 +1,16 @@
+<!-- components/progress/index.wxml -->
+<view class="container l-class">
+    <view class="text l-text-class" wx:if="{{showInfo && textPosition==='left'}}" style="color:{{textColor?textColor:''}};margin-right:{{interval}}rpx">
+        {{percent}}%
+    </view>
+    <view class="progress short" style="height:{{strokeWidth}}rpx;">
+        <view class="slot" style="margin-left:{{marginLeft}}rpx;margin-top:{{marginTop}}rpx;">
+            <slot name="header"></slot>
+        </view>
+        <view class="percent {{activeColor?'':'active'}} l-active-class" style="width:{{percent}}%;height:{{strokeWidth}}rpx;border-radius:{{borderRadius}}rpx;{{activeColor?'background-color:'+activeColor+';':''}}"></view>
+        <view class="background l-background-class" style="height:{{strokeWidth}}rpx;border-radius:{{borderRadius}}rpx;background-color:{{backgroundColor}};"></view>
+    </view>
+    <view class="text l-text-class" wx:if="{{showInfo && textPosition==='right'}}" style="color:{{textColor?textColor:''}};margin-left:{{interval}}rpx">
+        {{percent}}%
+    </view>
+</view>

examples/dist/progress/index.wxml

@@ -0,0 +1 @@
+.container{display:flex;flex-direction:row;align-items:center}.progress{position:relative;width:100%;transition:all .25s ease-in-out}.percent{position:absolute;z-index:1}.active{background-color:#3963bc}.text{color:#3963bc;font-size:30rpx}.background{position:absolute;width:100%}.header{position:absolute!important;z-index:2}.slot{position:absolute;z-index:2}