v2.0.2

v2.0.2 2.0版本上线

demo/pages/basics/progress/progress.js

@@ -0,0 +1,38 @@
+const app = getApp();
+Page({
+  data: {
+    StatusBar: app.globalData.StatusBar,
+    CustomBar: app.globalData.CustomBar,
+    ColorList: app.globalData.ColorList,
+    color:'red',
+  },
+  onLoad() {
+    let that = this;
+    setTimeout(function() {
+      that.setData({
+        loading: true
+      })
+    }, 500)
+  },
+  showModal(e) {
+    this.setData({
+      modalName: e.currentTarget.dataset.target
+    })
+  },
+  hideModal(e) {
+    this.setData({
+      modalName: null
+    })
+  },
+  SetColor(e) {
+    this.setData({
+      color: e.currentTarget.dataset.color,
+      modalName: null
+    })
+  },
+  SetActive(e) {
+    this.setData({
+      active: e.detail.value
+    })
+  },
+});

demo/pages/basics/progress/progress.json

@@ -0,0 +1 @@
+{}

demo/pages/basics/progress/progress.wxml

@@ -0,0 +1,116 @@
+<custom style="height:{{CustomBar}}px;">
+  <bar class="fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
+    <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
+      <icon class='icon-back' /> 进度条
+    </navigator>
+  </bar>
+</custom>
+<bar class="solid-bottom">
+  <view class='action'>
+    <icon class='icon-title text-blue' />进度条形状
+  </view>
+</bar>
+<view class="padding bg-white">
+  <progress-bar>
+    <view class='bg-red' style="width:{{loading?'61.8%':''}};">61.8%</view>
+  </progress-bar>
+  <progress-bar class="radius margin-top">
+    <view class='bg-red' style="width:{{loading?'61.8%':''}};">61.8%</view>
+  </progress-bar>
+  <progress-bar class="round margin-top">
+    <view class='bg-red' style="width:{{loading?'61.8%':''}};">61.8%</view>
+  </progress-bar>
+</view>
+<bar class="solid-bottom margin-top">
+  <view class='action'>
+    <icon class='icon-title text-blue' />进度条尺寸
+  </view>
+</bar>
+<view class="padding bg-white">
+  <progress-bar class="round">
+    <view class='bg-red' style="width:{{loading?'61.8%':''}};"></view>
+  </progress-bar>
+  <progress-bar class="round margin-top sm">
+    <view class='bg-red' style="width:{{loading?'61.8%':''}};"></view>
+  </progress-bar>
+  <progress-bar class="round margin-top xs">
+    <view class='bg-red' style="width:{{loading?'61.8%':''}};"></view>
+  </progress-bar>
+</view>
+
+<bar class="solid-bottom margin-top" bindtap="showModal" data-target="ColorModal">
+  <view class='action'>
+    <icon class='icon-title text-blue' />进度条颜色
+  </view>
+  <view class='action'>
+    <view class='padding-sm bg-{{color}} solid radius shadow-blur'></view>
+  </view>
+</bar>
+<view class="padding {{color=='white'?'bg-grey':'bg-white'}}">
+  <progress-bar class="round">
+    <view class='bg-{{color}}' style="width:{{loading?'61.8%':''}};"></view>
+  </progress-bar>
+</view>
+
+
+<bar class="solid-bottom margin-top">
+  <view class='action'>
+    <icon class='icon-title text-blue' />进度条条纹
+  </view>
+  <switch class='sm margin-right-sm' bindchange='SetActive'></switch>
+</bar>
+<view class="padding bg-white">
+  <progress-bar class="round sm striped {{active?'active':''}}">
+    <view class='bg-green' style="width:{{loading?'60%':''}};"></view>
+  </progress-bar>
+  <progress-bar class="round sm margin-top-sm striped {{active?'active':''}}">
+    <view class='bg-black' style="width:{{loading?'40%':''}};"></view>
+  </progress-bar>
+</view>
+<bar class="solid-bottom margin-top">
+  <view class='action'>
+    <icon class='icon-title text-blue' />进度条比例
+  </view>
+</bar>
+<view class="padding bg-white">
+  <progress-bar class="radius striped active">
+    <view class='bg-red' style="width:{{loading?'30%':''}};">30%</view>
+    <view class='bg-olive' style="width:{{loading?'45%':''}};">45%</view>
+    <view class='bg-cyan' style="width:{{loading?'25%':''}};">25%</view>
+  </progress-bar>
+</view>
+<bar class="solid-bottom margin-top">
+  <view class='action'>
+    <icon class='icon-title text-blue' />进度条布局
+  </view>
+</bar>
+<view class="padding bg-white ">
+  <view class='flex'>
+    <progress-bar class="round">
+      <view class='bg-green' style="width:{{loading?'100%':''}};"></view>
+    </progress-bar>
+    <icon class='icon-roundcheckfill text-green margin-left-sm' />
+  </view>
+  <view class='flex margin-top'>
+    <progress-bar class="round">
+      <view class='bg-green' style="width:{{loading?'80%':''}};"></view>
+    </progress-bar>
+    <text class='margin-left'>80%</text>
+  </view>
+</view>
+
+<modal-box class="{{modalName=='ColorModal'?'show':''}}">
+  <dialog>
+    <bar class="justify-end">
+      <view class='content'>选择颜色</view>
+      <view class='action' bindtap='hideModal'>
+        <icon class='icon-close text-red'></icon>
+      </view>
+    </bar>
+    <view class='grid col-5 padding'>
+      <view class='padding-xs' wx:for="{{ColorList}}" wx:key bindtap='SetColor' data-color='{{item.name}}' wx:if="{{item.name!='gray'}}">
+        <view class='padding-tb bg-{{item.name}} radius'> {{item.title}} </view>
+      </view>
+    </view>
+  </dialog>
+</modal-box>