v2.0.6

1.修复行距带来的垂直不居中问题
2.优化操作条组件，新增多种样式
3.优化背景颜色（某些组件的默认背景调整,移除一些important）
4.更新动画扩展5.优化按钮,标签,头像的大小

demo/pages/plugin/animation/animation.js

@@ -3,6 +3,62 @@ Page({
   data: {
     StatusBar: app.globalData.StatusBar,
     CustomBar: app.globalData.CustomBar,
+    list: [{
+        name: 'fade',
+        color: 'red'
+      },
+      {
+        name: 'scale-up',
+        color: 'orange'
+      },
+      {
+        name: 'scale-down',
+        color: 'olive'
+      },
+      {
+        name: 'slide-top',
+        color: 'green'
+      }, {
+        name: 'slide-bottom',
+        color: 'cyan'
+      },
+      {
+        name: 'slide-left',
+        color: 'blue'
+      },
+      {
+        name: 'slide-right',
+        color: 'purple'
+      },
+      {
+        name: 'shake',
+        color: 'mauve'
+      }
+    ],
+    toggleDelay: false
   },
- 
-});
+  toggle(e) {
+    console.log(e);
+    var anmiaton = e.currentTarget.dataset.class;
+    var that = this;
+    that.setData({
+      animation: anmiaton
+    })
+    setTimeout(function() {
+      that.setData({
+        animation: ''
+      })
+    }, 1000)
+  },
+  toggleDelay() {
+    var that = this;
+    that.setData({
+      toggleDelay: true
+    })
+    setTimeout(function() {
+      that.setData({
+        toggleDelay: false
+      })
+    }, 1000)
+  }
+})

demo/pages/plugin/animation/animation.wxml

@@ -5,7 +5,47 @@
     </navigator>
   </view>
 </view>
-<view class="margin radius gradual-green shadow-blur">
+<view class="cu-bar bg-white">
+  <view class='action'>
+    <text class='icon-title text-orange'></text> 默认效果
+  </view>
+</view>
+<view class="padding-sm">
+  <view class='flex flex-wrap justify-around'>
+    <button class='cu-btn bg-{{item.color}} animation-{{animation==item.name? item.name :""}} margin-sm basis-sm shadow' bindtap='toggle' data-class='{{item.name}}' wx:for="{{list}}">{{item.name}}</button>
+  </view>
+</view>
+<view class="cu-bar bg-white">
+  <view class='action'>
+    <text class='icon-title text-orange'></text> 反向动画
+  </view>
+</view>
+
+<view class="padding-sm">
+  <view class='flex flex-wrap justify-around'>
+    <button class='cu-btn bg-{{item.color}} animation-{{animation==item.name+"s"? item.name :""}} animation-reverse margin-sm basis-sm shadow' bindtap='toggle' data-class='{{item.name+"s"}}' wx:for="{{list}}">{{item.name}}</button>
+  </view>
+</view>
+<view class="cu-bar bg-white">
+  <view class='action'>
+    <text class='icon-title text-orange'></text> 延迟执行
+  </view>
+  <view class='action'>
+    <button class='cu-btn bg-cyan shadow' bindtap='toggleDelay'>开始执行</button>
+  </view>
+</view>
+
+<view class="padding-sm">
+  <view class='flex flex-wrap justify-around'>
+    <button class=' bg-{{item.color}} cu-btn {{toggleDelay?"animation-slide-bottom":""}} margin-sm basis-sm shadow' style='animation-delay: {{(index+1)*0.1}}s;' wx:for="{{list}}">0.{{index+1}}s</button>
+  </view>
+</view>
+<view class="cu-bar bg-white">
+  <view class='action'>
+    <text class='icon-title text-orange'></text> Gif动画
+  </view>
+</view>
+<view class="margin radius bg-gradual-green shadow-blur">
   <image src='https://image.weilanwl.com/gif/wave.gif' mode='scaleToFill' class='gif-black response' style='height:100rpx'></image>
 </view>
 <view class="margin flex">
@@ -17,7 +57,7 @@
   </view>
 </view>
 <view class="margin flex">
-  <view class='gradual-blue flex-sub margin-right radius shadow-lg'>
+  <view class='bg-gradual-blue flex-sub margin-right radius shadow-lg'>
     <image src='https://image.weilanwl.com/gif/rhomb-black.gif' mode='aspectFit' class='gif-black response' style='height:240rpx'></image>
   </view>
   <view class='bg-white flex-sub radius shadow-lg'>

demo/pages/plugin/animation/animation.wxss

@@ -9,3 +9,174 @@ image[class*="gif-"]{
 .gif-white{  
   mix-blend-mode: multiply; 
 }
+
+
+[class*=animation-] {
+    animation-duration: .5s;
+    animation-timing-function: ease-out;
+    animation-fill-mode: both
+}
+
+.animation-fade {
+    animation-name: fade;
+    animation-duration: .8s;
+    animation-timing-function: linear
+}
+
+.animation-scale-up {
+    animation-name: scale-up
+}
+
+.animation-scale-down {
+    animation-name: scale-down
+}
+
+.animation-slide-top {
+    animation-name: slide-top
+}
+
+.animation-slide-bottom {
+    animation-name: slide-bottom
+}
+
+.animation-slide-left {
+    animation-name: slide-left
+}
+
+.animation-slide-right {
+    animation-name: slide-right
+}
+
+.animation-shake {
+    animation-name: shake
+}
+
+.animation-reverse {
+    animation-direction: reverse
+}
+
+@keyframes fade {
+    0% {
+        opacity: 0
+    }
+
+    100% {
+        opacity: 1
+    }
+}
+
+@keyframes scale-up {
+    0% {
+        opacity: 0;
+        transform: scale(.2)
+    }
+
+    100% {
+        opacity: 1;
+        transform: scale(1)
+    }
+}
+
+@keyframes scale-down {
+    0% {
+        opacity: 0;
+        transform: scale(1.8)
+    }
+
+    100% {
+        opacity: 1;
+        transform: scale(1)
+    }
+}
+
+@keyframes slide-top {
+    0% {
+        opacity: 0;
+        transform: translateY(-100%)
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateY(0)
+    }
+}
+
+@keyframes slide-bottom {
+    0% {
+        opacity: 0;
+        transform: translateY(100%)
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateY(0)
+    }
+}
+
+@keyframes shake {
+
+    0%,
+    100% {
+        transform: translateX(0)
+    }
+
+    10% {
+        transform: translateX(-9px)
+    }
+
+    20% {
+        transform: translateX(8px)
+    }
+
+    30% {
+        transform: translateX(-7px)
+    }
+
+    40% {
+        transform: translateX(6px)
+    }
+
+    50% {
+        transform: translateX(-5px)
+    }
+
+    60% {
+        transform: translateX(4px)
+    }
+
+    70% {
+        transform: translateX(-3px)
+    }
+
+    80% {
+        transform: translateX(2px)
+    }
+
+    90% {
+        transform: translateX(-1px)
+    }
+}
+
+@keyframes slide-left {
+    0% {
+        opacity: 0;
+        transform: translateX(-100%)
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateX(0)
+    }
+}
+
+@keyframes slide-right {
+    0% {
+        opacity: 0;
+        transform: translateX(100%)
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateX(0)
+    }
+}

demo/pages/plugin/gradual/gradual.wxml

@@ -1,5 +1,5 @@
 <view class="cu-custom" style="height:{{CustomBar}}px;">
-  <view class="cu-bar fixed gradual-orange" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
+  <view class="cu-bar fixed bg-gradual-orange" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
     <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
       <text class='icon-back'></text> 渐变
     </navigator>

demo/pages/plugin/home/home.js

@@ -1,5 +1,5 @@
 const app = getApp();
-Page({
+Component({
   data: {
     StatusBar: app.globalData.StatusBar,
     CustomBar: app.globalData.CustomBar,
@@ -15,10 +15,21 @@ Page({
       }
     ]
   },
-  toChild(e) {
-    wx.navigateTo({
-      url: e.currentTarget.dataset.url
-    })
+  methods: {
+    toChild(e) {
+      wx.navigateTo({
+        url: e.currentTarget.dataset.url
+      })
+    },
   },
-
+  pageLifetimes: {
+    show() {
+      if (typeof this.getTabBar === 'function' &&
+        this.getTabBar()) {
+        this.getTabBar().setData({
+          selected: 2
+        })
+      }
+    }
+  }
 });

demo/pages/plugin/home/home.wxss

@@ -1,4 +1,6 @@
-
+page{
+  padding-bottom: 100rpx;
+}
 .cu-bar .content image{
   height: 60rpx;
   width: 240rpx;

demo/pages/plugin/indexes/indexes.wxml

@@ -5,13 +5,13 @@
     </navigator>
   </view>
 </view>
-<view class="cu-bar search fixed" style="top:{{CustomBar}}px;">
+<view class="cu-bar bg-white search fixed" style="top:{{CustomBar}}px;">
   <view class='search-form round'>
     <text class="icon-search"></text>
     <input type="text" placeholder="输入搜索的关键词" confirm-type="search"></input>
   </view>
   <view class='action'>
-    <button class='cu-btn gradual-green shadow-blur round'>搜索</button>
+    <button class='cu-btn bg-gradual-green shadow-blur round'>搜索</button>
   </view>
 </view>
 <scroll-view scroll-y class="indexes" scroll-into-view="indexes-{{listCurID}}" style='height:calc(100vh - {{CustomBar}}px - 50px)' scroll-with-animation="true" enable-back-to-top="true">