v2.0.6

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

demo/pages/component/bar/bar.wxml

@@ -1,5 +1,5 @@
 <view class="cu-custom" style="height:{{CustomBar}}px;">
-  <view class="cu-bar fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
+  <view class="cu-bar fixed bg-gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
     <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
       <text class='icon-back'></text>
       <text>操作条</text>
@@ -7,239 +7,418 @@
   </view>
 </view>
 
-<view class="cu-bar margin-top">
-  <view class='action'>
-    <text class='icon-back text-gray'></text>
-    <text>返回</text>
-  </view>
-</view>
-
-<view class="cu-bar margin-top">
+<view class="cu-bar bg-white margin-top">
   <view class='action'>
     <text class='icon-title text-green'></text>
-    <text>案例</text>
+    <text>底部操作条</text>
   </view>
+</view>
+<view class='box'>
+  <view class="cu-bar tabbar bg-white">
+    <view class="action">
+      <view class='icon-cu-image'>
+        <image src='/images/tabbar/basics_cur.png'></image>
+      </view>
+      <view class='text-green'>元素</view>
+    </view>
+    <view class="action">
+      <view class='icon-cu-image'>
+        <image src='/images/tabbar/component.png'></image>
+      </view>
+      <view class='text-gray'>组件</view>
+    </view>
+    <view class="action">
+      <view class='icon-cu-image'>
+        <image src='/images/tabbar/plugin.png'></image>
+        <view class='cu-tag badge'>99</view>
+      </view>
+      <view class='text-gray'>扩展</view>
+    </view>
+    <view class="action">
+      <view class='icon-cu-image'>
+        <image src='/images/tabbar/about.png'></image>
+        <view class='cu-tag badge'></view>
+      </view>
+      <view class='text-gray'>关于</view>
+    </view>
+  </view>
+  <view class="cu-bar tabbar margin-bottom-xl bg-black">
+    <view class="action text-orange">
+      <view class='icon-homefill'></view> 首页
+    </view>
+    <view class="action text-gray">
+      <view class='icon-similar'></view> 分类
+    </view>
+    <view class="action text-gray">
+      <view class='icon-recharge'></view>
+      积分
+    </view>
+    <view class="action text-gray">
+      <view class='icon-cart'>
+        <view class='cu-tag badge'>99</view>
+      </view>
+      购物车
+    </view>
+    <view class="action text-gray">
+      <view class='icon-my'>
+        <view class='cu-tag badge'></view>
+      </view>
+      我的
+    </view>
+  </view>
+  <view class="cu-bar tabbar margin-bottom-xl bg-white">
+    <view class="action text-green">
+      <view class='icon-homefill'></view> 首页
+    </view>
+    <view class="action text-gray">
+      <view class='icon-similar'></view> 分类
+    </view>
+    <view class="action text-gray add-action">
+      <button class='cu-btn icon-add bg-green shadow'></button>
+      发布
+    </view>
+    <view class="action text-gray">
+      <view class='icon-cart'>
+        <view class='cu-tag badge'>99</view>
+      </view>
+      购物车
+    </view>
+    <view class="action text-gray">
+      <view class='icon-my'>
+        <view class='cu-tag badge'></view>
+      </view>
+      我的
+    </view>
+  </view>
+  <view class="cu-bar tabbar bg-black">
+    <view class="action text-green">
+      <view class='icon-homefill'></view> 首页
+    </view>
+    <view class="action text-gray">
+      <view class='icon-similar'></view> 分类
+    </view>
+    <view class="action text-gray add-action">
+      <button class='cu-btn icon-add bg-green shadow'></button>
+      发布
+    </view>
+    <view class="action text-gray">
+      <view class='icon-cart'>
+        <view class='cu-tag badge'>99</view>
+      </view>
+      购物车
+    </view>
+    <view class="action text-gray">
+      <view class='icon-my'>
+        <view class='cu-tag badge'></view>
+      </view>
+      我的
+    </view>
+  </view>
+
+  <view class="cu-bar bg-white tabbar border shop">
+    <button class="action" open-type='contact'>
+      <view class='icon-service text-green'>
+        <view class='cu-tag badge'></view>
+      </view>
+      客服
+    </button>
+    <view class="action text-orange">
+      <view class='icon-favorfill'></view> 已收藏
+    </view>
+    <view class="action">
+      <view class='icon-cart'>
+        <view class='cu-tag badge'>99</view>
+      </view>
+      购物车
+    </view>
+    <view class='bg-red submit'>立即订购</view>
+  </view>
+
+  <view class="cu-bar bg-white tabbar border shop">
+    <button class="action" open-type='contact'>
+      <view class='icon-service text-green'>
+        <view class='cu-tag badge'></view>
+      </view>
+      客服
+    </button>
+    <view class="action">
+      <view class='icon-cart'>
+        <view class='cu-tag badge'>99</view>
+      </view>
+      购物车
+    </view>
+    <view class='bg-orange submit'>加入购物车</view>
+    <view class='bg-red submit'>立即订购</view>
+  </view>
+
+  <view class="cu-bar bg-white tabbar border shop">
+    <button class="action" open-type='contact'>
+      <view class='icon-service text-green'>
+        <view class='cu-tag badge'></view>
+      </view>
+      客服
+    </button>
+    <view class="action">
+      <view class=' icon-shop'></view> 店铺
+    </view>
+    <view class="action">
+      <view class='icon-cart'>
+        <view class='cu-tag badge'>99</view>
+      </view>
+      购物车
+    </view>
+    <view class='btn-group'>
+      <button class='cu-btn bg-red round shadow-blur'>立即订购</button>
+    </view>
+  </view>
+  <view class="cu-bar bg-white tabbar border shop">
+    <button class="action" open-type='contact'>
+      <view class='icon-service text-green'>
+        <view class='cu-tag badge'></view>
+      </view> 客服
+    </button>
+    <view class="action">
+      <view class='icon-cart'>
+        <view class='cu-tag badge'>99</view>
+      </view>
+      购物车
+    </view>
+    <view class='btn-group'>
+      <button class='cu-btn bg-orange round shadow-blur'>加入购物车</button>
+      <button class='cu-btn bg-red round shadow-blur'>立即订购</button>
+    </view>
+  </view>
+</view>
+
+<view class="cu-bar bg-white">
   <view class='action'>
-    <button class='cu-btn bg-green shadow-blur sm'>添加
-      <text class='icon-add'></text> </button>
+    <text class='icon-title text-green'></text>
+    <text>标题操作条</text>
+  </view>
+</view>
+<view class='box' wx:if="{{false}}">
+  <view class="cu-bar justify-center bg-white">
+    <view class='action border-title'>
+      <text class='text-xl text-bold'>关于我们</text>
+      <text class='bg-grey' style='width:2rem'></text>
+      <!-- 底部样式 last-child选择器-->
+    </view>
+  </view>
+  <view class="cu-bar justify-center bg-white">
+    <view class='action border-title'>
+      <text class='text-xl text-bold text-blue'>关于我们</text>
+      <text class='bg-gradual-blue' style='width:3rem'></text>
+    </view>
+  </view>
+  <view class="cu-bar justify-center bg-white">
+    <view class='action sub-title'>
+      <text class='text-xl text-bold text-green'>关于我们</text>
+      <text class='bg-green' style='width:2rem'></text>
+      <!-- last-child选择器-->
+    </view>
+  </view>
+  <view class="cu-bar justify-center bg-white">
+    <view class='action sub-title'>
+      <text class='text-xl text-bold text-blue'>关于我们</text>
+      <text class='text-ABC text-blue'>about</text>
+      <!-- last-child选择器-->
+    </view>
+  </view>
+</view>
+<view class='box'>
+  <view class="cu-bar bg-white">
+    <view class='action border-title'>
+      <text class='text-xl text-bold'>关于我们</text>
+      <text class='bg-grey' style='width:2rem'></text>
+      <!-- 底部样式 last-child选择器-->
+    </view>
+  </view>
+  <view class="cu-bar bg-white">
+    <view class='action border-title'>
+      <text class='text-xl text-bold text-blue'>关于我们</text>
+      <text class='bg-gradual-blue' style='width:3rem'></text>
+    </view>
+  </view>
+  <view class="cu-bar bg-white">
+    <view class='action sub-title'>
+      <text class='text-xl text-bold text-green'>关于我们</text>
+      <text class='bg-green'></text>
+      <!-- last-child选择器-->
+    </view>
+  </view>
+  <view class="cu-bar bg-white">
+    <view class='action sub-title'>
+      <text class='text-xl text-bold text-blue'>关于我们</text>
+      <text class='text-ABC text-blue'>about</text>
+      <!-- last-child选择器-->
+    </view>
+  </view>
+  <view class="cu-bar bg-white">
+    <view class='action title-style-3'>
+      <text class='text-xl text-bold'>关于我们</text>
+      <text class='text-Abc text-gray self-end margin-left-sm'>about</text>
+    </view>
+  </view>
+  <view class="cu-bar bg-white">
+    <view class='action'>
+      <text class='icon-title text-green'></text>
+      <text class='text-xl text-bold'>关于我们</text>
+    </view>
+  </view>
+  <view class="cu-bar bg-white">
+    <view class='action'>
+      <text class='icon-titles text-green'></text>
+      <text class='text-xl text-bold'>关于我们</text>
+    </view>
   </view>
 </view>
 
-<view class="cu-bar margin-top justify-end">
+<view class="cu-bar bg-white">
   <view class='action'>
-    <text class='icon-close text-red'></text>
+    <text class='icon-title text-green'></text>
+    <text>顶部操作条</text>
+  </view>
+</view>
+<view class='box'>
+  <view class="cu-bar bg-white">
+    <view class='action'>
+      <text class='icon-back text-gray'></text> 返回
+    </view>
+    <view class='content text-bold'>
+      操作条
+    </view>
+  </view>
+  <view class="cu-bar bg-white">
+    <view class='action'>
+      <text class='icon-homefill text-gray'></text> 首页
+    </view>
+    <view class='content text-bold'>
+      鲜亮的高饱和色彩，专注视觉的小程序组件库
+    </view>
+    <view class='action'>
+      <text class='icon-cardboardfill text-grey'></text>
+      <text class='icon-recordfill text-red'></text>
+    </view>
+  </view>
+  <view class="cu-bar bg-blue">
+    <view class='action'>
+      <text class='icon-close'></text> 关闭
+    </view>
+    <view class='content text-bold'>
+      海蓝
+    </view>
+  </view>
+  <view class="cu-bar bg-black search">
+    <view class="cu-avatar round" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></view>
+    <view class='content'>
+      ColorUI
+    </view>
+    <view class='action'>
+      <text class="icon-more"></text>
+    </view>
   </view>
 </view>
 
-<view class="cu-bar margin-top">
+
+<view class="cu-bar bg-white">
   <view class='action'>
-    <text class='icon-back text-gray'></text> 返回
+    <text class='icon-title text-green'></text>
+    <text>搜索操作条</text>
   </view>
-  <view class='content'>
-    操作条
+</view>
+<view class='box'>
+  <view class="cu-bar search bg-white">
+    <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 bg-green shadow-blur round'>搜索</button>
+    </view>
+  </view>
+  <view class="cu-bar search bg-white">
+    <view class="cu-avatar round" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);"></view>
+    <view class='search-form round'>
+      <text class="icon-search"></text>
+      <input type="text" placeholder="搜索图片、文章、视频" confirm-type="search"></input>
+    </view>
+    <view class='action'>
+      <text>广州</text>
+      <text class="icon-triangledownfill"></text>
+    </view>
+  </view>
+  <view class="cu-bar bg-red search">
+    <view class="cu-avatar round" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></view>
+    <view class='search-form radius'>
+      <text class="icon-search"></text>
+      <input type="text" placeholder="搜索图片、文章、视频" confirm-type="search"></input>
+    </view>
+    <view class='action'>
+      <text>广州</text>
+      <text class="icon-triangledownfill"></text>
+    </view>
+  </view>
+  <view class="cu-bar bg-cyan search">
+    <view class='search-form radius'>
+      <text class="icon-search"></text>
+      <input type="text" placeholder="搜索图片、文章、视频" confirm-type="search"></input>
+    </view>
+    <view class='action'>
+      <text class='icon-close'></text>
+      <text>取消</text>
+    </view>
   </view>
 </view>
 
-<view class="cu-bar margin-top">
+<view class="cu-bar bg-white">
   <view class='action'>
-    <text class='icon-homefill text-gray'></text> 首页
+    <text class='icon-title text-green'></text>
+    <text>操作条按钮组</text>
   </view>
-  <view class='content'>
-    鲜亮的高饱和色彩，专注视觉的小程序组件库
+</view>
+
+<view class='box'>
+  <view class="cu-bar btn-group">
+    <button class='cu-btn bg-green shadow-blur round lg'>保存</button>
   </view>
+  <view class="cu-bar btn-group">
+    <button class='cu-btn bg-green shadow-blur'>保存</button>
+    <button class='cu-btn text-green line-green shadow'>上传</button>
+  </view>
+  <view class="cu-bar btn-group">
+    <button class='cu-btn bg-green shadow-blur round'>保存</button>
+    <button class='cu-btn bg-blue shadow-blur round'>提交</button>
+  </view>
+</view>
+
+
+<view class="cu-bar bg-white">
   <view class='action'>
-    <text class='icon-cardboardfill text-grey'></text>
-    <text class='icon-recordfill text-red'></text>
+    <text class='icon-title text-green'></text>
+    <text>输入操作条</text>
   </view>
 </view>
+<view class='box'>
+  <view class="cu-bar input">
+    <view class='action'>
+      <text class='icon-sound text-grey'></text>
+    </view>
+    <input class='solid-bottom' focus="{{false}}" maxlength="300" cursor-spacing="10"></input>
+    <view class='action'>
+      <text class='icon-emojifill text-grey'></text>
+    </view>
+    <button class='cu-btn bg-green shadow-blur'>发送</button>
+  </view>
 
-<view class="cu-bar margin-top bg-blue">
-  <view class='action'>
-    <text class='icon-close'></text> 关闭
+  <view class="cu-bar input">
+    <view class="cu-avatar round" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></view>
+    <view class='action'>
+      <text class='icon-roundaddfill text-grey'></text>
+    </view>
+    <input class='solid-bottom' maxlength="300" cursor-spacing="10"></input>
+    <view class='action'>
+      <text class='icon-emojifill text-grey'></text>
+    </view>
+    <button class='cu-btn bg-green shadow-blur'>发送</button>
   </view>
-  <view class='content'>
-    海蓝
-  </view>
-</view>
-<view class="cu-bar margin-top bg-orange">
-  <view class='action'>
-    <text class='icon-back'></text> 返回
-  </view>
-  <view class='content'>
-    操作条
-  </view>
-</view>
-
-<view class="cu-bar margin-top bg-black search">
-  <view class="cu-avatar round" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></view>
-  <view class='content'>
-    ColorUI
-  </view>
-  <view class='action'>
-    <text class="icon-more"></text>
-  </view>
-</view>
-
-<view class="cu-bar margin-top bg-red search">
-  <view class="cu-avatar round" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></view>
-  <view class='search-form radius'>
-    <text class="icon-search"></text>
-    <input type="text" placeholder="搜索图片、文章、视频" confirm-type="search"></input>
-  </view>
-  <view class='action'>
-    <text>广州</text>
-    <text class="icon-triangledownfill"></text>
-  </view>
-</view>
-
-<view class="cu-bar margin-top search">
-  <view class="cu-avatar round" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);"></view>
-  <view class='search-form round'>
-    <text class="icon-search"></text>
-    <input type="text" placeholder="搜索图片、文章、视频" confirm-type="search"></input>
-  </view>
-  <view class='action'>
-    <text>广州</text>
-    <text class="icon-triangledownfill"></text>
-  </view>
-</view>
-
-<view class="cu-bar margin-top bg-cyan search">
-  <view class='search-form radius'>
-    <text class="icon-search"></text>
-    <input type="text" placeholder="搜索图片、文章、视频" confirm-type="search"></input>
-  </view>
-  <view class='action'>
-    <text class='icon-close'></text>
-    <text>取消</text>
-  </view>
-</view>
-
-<view class="cu-bar margin-top search">
-  <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 bg-green shadow-blur round'>搜索</button>
-  </view>
-</view>
-
-<view class="cu-bar margin-top btn-group">
-  <button class='cu-btn bg-green shadow-blur round'>保存</button>
-</view>
-
-<view class="cu-bar margin-top btn-group">
-  <button class='cu-btn bg-green shadow-blur round lg'>保存</button>
-</view>
-
-<view class="cu-bar margin-top btn-group">
-  <button class='cu-btn bg-green shadow-blur'>保存</button>
-  <button class='cu-btn text-green line-green shadow'>上传</button>
-</view>
-
-<view class="cu-bar margin-top btn-group">
-  <button class='cu-btn bg-green shadow-blur round'>保存</button>
-  <button class='cu-btn bg-blue shadow-blur round'>提交</button>
-</view>
-
-<view class="cu-bar margin-top shop">
-  <button class="cu-btn action"  open-type='contact'>
-    <text class='icon-service text-green'>
-      <view class='cu-tag badge'></view>
-    </text>
-    客服
-  </button>
-  <view class="action text-orange">
-    <text class='icon-favorfill'></text> 已收藏
-  </view>
-  <view class="action">
-    <text class='icon-cart'>
-      <view class='cu-tag badge'>99</view>
-    </text>
-    购物车
-  </view>
-  <view class='bg-red submit'>立即订购</view>
-</view>
-
-<view class="cu-bar margin-top shop">
-  <button class="cu-btn action"  open-type='contact'>
-    <text class='icon-service text-green'>
-      <view class='cu-tag badge'></view>
-    </text>
-    客服
-  </button>
-  <view class="action">
-    <text class='icon-cart'>
-      <view class='cu-tag badge'>99</view>
-    </text>
-    购物车
-  </view>
-  <view class='bg-orange submit'>加入购物车</view>
-  <view class='bg-red submit'>立即订购</view>
-</view>
-
-<view class="cu-bar margin-top shop">
-  <button class="cu-btn action"  open-type='contact'>
-    <text class='icon-service text-green'>
-      <view class='cu-tag badge'></view>
-    </text>
-    客服
-  </button>
-  <view class="action">
-    <text class=' icon-shop'></text> 店铺
-  </view>
-  <view class="action">
-    <text class='icon-cart'>
-      <view class='cu-tag badge'>99</view>
-    </text>
-    购物车
-  </view>
-  <view class='submit'>
-    <button class='cu-btn bg-red round shadow-blur'>立即订购</button>
-  </view>
-</view>
-
-<view class="cu-bar margin-top shop">
-  <button class="cu-btn action"  open-type='contact'>
-    <text class='icon-service text-green'>
-      <view class='cu-tag badge'></view>
-    </text>
-    客服
-  </button>
-  <view class="action">
-    <text class='icon-cart'>
-      <view class='cu-tag badge'>99</view>
-    </text>
-    购物车
-  </view>
-  <view class='submit'>
-    <button class='cu-btn bg-orange round shadow-blur'>加入购物车</button>
-  </view>
-  <view class='submit'>
-    <button class='cu-btn bg-red round shadow-blur'>立即订购</button>
-  </view>
-</view>
-
-<view class="cu-bar margin-top input">
-  <view class='action'>
-    <text class='icon-sound text-grey'></text>
-  </view>
-  <input class='solid-bottom' focus="{{false}}" maxlength="300" cursor-spacing="10"></input>
-  <view class='action'>
-    <text class='icon-emojifill text-grey'></text>
-  </view>
-  <button class='cu-btn bg-green shadow-blur'>发送</button>
-</view>
-
-<view class="cu-bar margin-top input">
-  <view class="cu-avatar round" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></view>
-  <view class='action'>
-    <text class='icon-roundaddfill text-grey'></text>
-  </view>
-  <input class='solid-bottom' maxlength="300" cursor-spacing="10"></input>
-  <view class='action'>
-    <text class='icon-emojifill text-grey'></text>
-  </view>
-  <button class='cu-btn bg-green shadow-blur'>发送</button>
 </view>

demo/pages/component/bar/bar.wxss

@@ -0,0 +1,7 @@
+.box {  
+  margin: 20rpx; 
+}
+
+.box view.cu-bar {
+  margin-top: 20rpx; 
+}

demo/pages/component/card/card.wxml

@@ -1,11 +1,11 @@
 <view class="cu-custom" style="height:{{CustomBar}}px;">
-  <view class="cu-bar fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
+  <view class="cu-bar fixed bg-gradual-pink" 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>
   </view>
 </view>
-<view class="cu-bar solid-bottom">
+<view class="cu-bar bg-white solid-bottom">
   <view class='action'>
     <text class='icon-titles text-orange '></text> 案例类卡片
   </view>
@@ -38,7 +38,7 @@
     </view>
   </view>
 </view>
-<view class="cu-bar solid-bottom {{isCard?'margin-top':''}}">
+<view class="cu-bar bg-white solid-bottom {{isCard?'margin-top':''}}">
   <view class='action'>
     <text class='icon-titles text-orange '></text> 动态类卡片
   </view>
@@ -98,7 +98,7 @@
   </view>
 </view>
 
-<view class="cu-bar solid-bottom margin-top">
+<view class="cu-bar bg-white solid-bottom margin-top">
   <view class='action'>
     <text class='icon-titles text-orange '></text> 文章类卡片
   </view>

demo/pages/component/chat/chat.wxml

@@ -1,5 +1,5 @@
 <view class="cu-custom" style="height:{{CustomBar}}px;">
-  <view class="cu-bar fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
+  <view class="cu-bar fixed bg-gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
     <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
       <text class='icon-back'></text>
       聊天
@@ -10,7 +10,7 @@
 <view class="cu-chat">
   <view class="cu-item self">
     <view class="main">
-      <view class='content bg-green shadow-blur'>
+      <view class='content bg-green shadow'>
         <text>喵喵喵！喵喵喵！喵喵喵！喵喵！喵喵！！喵！喵喵喵！</text>
       </view>
     </view>
@@ -87,5 +87,5 @@
   <view class='action'>
     <text class='icon-emojifill text-grey'></text>
   </view>
-  <button class='cu-btn bg-green shadow-blur'>发送</button>
+  <button class='cu-btn bg-green shadow'>发送</button>
 </view>

demo/pages/component/form/form.wxml

@@ -1,5 +1,5 @@
 <view class="cu-custom" style="height:{{CustomBar}}px;">
-  <view class="cu-bar fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
+  <view class="cu-bar fixed bg-gradual-pink" 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/component/home/home.js

@@ -1,4 +1,4 @@
-Page({
+Component({
   data: {
     elements: [
       { title: '操作条', name: 'bar', color: 'purple', icon: 'vipcard' },
@@ -15,4 +15,14 @@ Page({
   },
   onLoad: function () {
   },
+  pageLifetimes: {
+    show() {
+      if (typeof this.getTabBar === 'function' &&
+        this.getTabBar()) {
+        this.getTabBar().setData({
+          selected: 1
+        })
+      }
+    }
+  }
 })

demo/pages/component/home/home.json

@@ -1 +1,3 @@
-{}
+{
+  "usingComponents": {}
+}

demo/pages/component/home/home.wxss

@@ -0,0 +1,3 @@
+page{
+  padding-bottom: 100rpx;
+}

demo/pages/component/list/list.wxml

@@ -1,11 +1,11 @@
 <view class="cu-custom" style="height:{{CustomBar}}px;">
-  <view class="cu-bar fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
+  <view class="cu-bar fixed bg-gradual-pink" 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>
   </view>
 </view>
-<view class="cu-bar solid-bottom margin-top">
+<view class="cu-bar bg-white solid-bottom margin-top">
   <view class='action'>
     <text class='icon-title text-orange '></text> 宫格列表
   </view>
@@ -49,7 +49,7 @@
 </view>
 
 
-<view class="cu-bar solid-bottom margin-top">
+<view class="cu-bar bg-white solid-bottom margin-top">
   <view class='action'>
     <text class='icon-title text-orange '></text> 菜单列表
   </view>
@@ -170,7 +170,7 @@
   </view>
 </view>
 
-<view class="cu-bar solid-bottom margin-top">
+<view class="cu-bar bg-white solid-bottom margin-top">
   <view class='action'>
     <text class='icon-title text-orange '></text> 消息列表
   </view>
@@ -248,7 +248,7 @@
 </view>
 
 
-<view class="cu-bar solid-bottom margin-top">
+<view class="cu-bar bg-white solid-bottom margin-top">
   <view class='action'>
     <text class='icon-title text-orange '></text> 列表左滑
   </view>

demo/pages/component/modal/modal.wxml

@@ -1,12 +1,12 @@
 <view class="cu-custom" style="height:{{CustomBar}}px;">
-  <view class="cu-bar fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
+  <view class="cu-bar fixed bg-gradual-pink" 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>
   </view>
 </view>
 
-<view class="cu-bar">
+<view class="cu-bar bg-white">
   <view class='action'>
     <text class='icon-title text-orange '></text> 模态窗口
   </view>
@@ -16,7 +16,7 @@
 </view>
 <view class="cu-modal {{modalName=='Modal'?'show':''}}">
   <view class="cu-dialog">
-    <view class="cu-bar justify-end">
+    <view class="cu-bar bg-white justify-end">
       <view class='content'>Modal标题</view>
       <view class='action' bindtap='hideModal'>
         <text class='icon-close text-red'></text>
@@ -28,7 +28,7 @@
   </view>
 </view>
 
-<view class="cu-bar margin-top">
+<view class="cu-bar bg-white margin-top">
   <view class='action'>
     <text class='icon-title text-orange '></text> 底部窗口
   </view>
@@ -38,7 +38,7 @@
 </view>
 <view class="cu-modal bottom-modal {{modalName=='bottomModal'?'show':''}}">
   <view class="cu-dialog">
-    <view class="cu-bar">
+    <view class="cu-bar bg-white">
       <view class='action text-green'>确定</view>
       <view class='action text-blue' bindtap='hideModal'>取消</view>
     </view>
@@ -48,7 +48,7 @@
   </view>
 </view>
 
-<view class="cu-bar margin-top">
+<view class="cu-bar bg-white margin-top">
   <view class='action'>
     <text class='icon-title text-orange '></text> 对话窗口
   </view>
@@ -59,7 +59,7 @@
 </view>
 <view class="cu-modal {{modalName=='DialogModal1'?'show':''}}">
   <view class="cu-dialog">
-    <view class="cu-bar justify-end">
+    <view class="cu-bar bg-white justify-end">
       <view class='content'>Modal标题</view>
       <view class='action' bindtap='hideModal'>
         <text class='icon-close text-red'></text>
@@ -68,7 +68,7 @@
     <view class='padding-xl'>
       Modal 内容。
     </view>
-    <view class="cu-bar justify-end">
+    <view class="cu-bar bg-white justify-end">
       <view class='action'>
         <button class='cu-btn line-green text-green' bindtap='hideModal'>取消</button>
         <button class='cu-btn bg-green margin-left' bindtap='hideModal'>确定</button>
@@ -80,7 +80,7 @@
 
 <view class="cu-modal {{modalName=='DialogModal2'?'show':''}}">
   <view class="cu-dialog">
-    <view class="cu-bar justify-end">
+    <view class="cu-bar bg-white justify-end">
       <view class='content'>Modal标题</view>
       <view class='action' bindtap='hideModal'>
         <text class='icon-close text-red'></text>
@@ -89,7 +89,7 @@
     <view class='padding-xl'>
       Modal 内容。
     </view>
-    <view class="cu-bar">
+    <view class="cu-bar bg-white">
       <view class='action margin-0 flex-sub text-green ' bindtap='hideModal'>
         <text class='icon-moneybag'></text>微信支付</view>
       <view class='action margin-0 flex-sub text-green solid-left' bindtap='hideModal'>取消</view>
@@ -98,7 +98,7 @@
   </view>
 </view>
 
-<view class="cu-bar margin-top">
+<view class="cu-bar bg-white margin-top">
   <view class='action'>
     <text class='icon-title text-orange '></text> 图片窗口
   </view>
@@ -110,20 +110,20 @@
 <view class="cu-modal {{modalName=='Image'?'show':''}}">
   <view class="cu-dialog">
     <view class="bg-img" style="background-image: url('https://albedo-theme.com/wp-content/uploads/2016/08/pexels-photo-26180.jpg');height:200px;">
-      <view class="cu-bar justify-end none-bg text-white">
+      <view class="cu-bar justify-end text-white">
         <view class='action' bindtap='hideModal'>
           <text class='icon-close '></text>
         </view>
       </view>
     </view>
-    <view class="cu-bar">
+    <view class="cu-bar bg-white">
       <view class='action margin-0 flex-sub  solid-left' bindtap='hideModal'>我知道了</view>
     </view>
   </view>
 </view>
 
 
-<view class="cu-bar margin-top">
+<view class="cu-bar bg-white margin-top">
   <view class='action'>
     <text class='icon-title text-orange '></text> 单选窗口
   </view>
@@ -147,7 +147,7 @@
   </view>
 </view>
 
-<view class="cu-bar margin-top">
+<view class="cu-bar bg-white margin-top">
   <view class='action'>
     <text class='icon-title text-orange '></text> 多选窗口
   </view>
@@ -157,7 +157,7 @@
 </view>
 <view class="cu-modal bottom-modal {{modalName=='ChooseModal'?'show':''}}" bindtap='hideModal'>
   <view class="cu-dialog" catchtap>
-    <view class="cu-bar">
+    <view class="cu-bar bg-white">
       <view class='action text-green'>确定</view>
       <view class='action text-blue' bindtap='hideModal'>取消</view>
     </view>
@@ -169,7 +169,7 @@
   </view>
 </view>
 
-<view class="cu-bar margin-top">
+<view class="cu-bar bg-white margin-top">
   <view class='action'>
     <text class='icon-title text-orange '></text> 侧边抽屉
   </view>

demo/pages/component/nav/nav.wxml

@@ -1,5 +1,5 @@
 <view class="cu-custom" style="height:{{CustomBar}}px;">
-  <view class="cu-bar fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
+  <view class="cu-bar fixed bg-gradual-pink" 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>
@@ -8,7 +8,7 @@
 <view wx:for="{{10}}" wx:key wx:if="{{index==TabCur}}" class='bg-grey padding margin text-center'>
   Tab{{index}}
 </view>
-<view class="cu-bar solid-bottom">
+<view class="cu-bar bg-white solid-bottom">
   <view class='action'>
     <text class='icon-titles text-orange '></text> 默认
   </view>
@@ -19,7 +19,7 @@
   </view>
 </scroll-view>
 
-<view class="cu-bar margin-top solid-bottom">
+<view class="cu-bar bg-white margin-top solid-bottom">
   <view class='action'>
     <text class='icon-title text-orange'></text> 居中
   </view>
@@ -30,7 +30,7 @@
   </view>
 </scroll-view>
 
-<view class="cu-bar margin-top solid-bottom">
+<view class="cu-bar bg-white margin-top solid-bottom">
   <view class='action'>
     <text class='icon-title text-orange'></text> 平分
   </view>
@@ -42,7 +42,7 @@
     </view>
   </view>
 </scroll-view>
-<view class="cu-bar margin-top solid-bottom">
+<view class="cu-bar bg-white margin-top solid-bottom">
   <view class='action'>
     <text class='icon-title text-orange'></text> 背景
   </view>
@@ -52,7 +52,7 @@
     Tab{{index}}
   </view>
 </scroll-view>
-<view class="cu-bar margin-top solid-bottom">
+<view class="cu-bar bg-white margin-top solid-bottom">
   <view class='action'>
     <text class='icon-title text-orange'></text> 图标
   </view>
@@ -69,7 +69,7 @@
   </view>
 </scroll-view>
 
-<view class="cu-bar margin-top solid-bottom">
+<view class="cu-bar bg-white margin-top solid-bottom">
   <view class='action'>
     <text class='icon-title text-orange'></text> 定位
   </view>

demo/pages/component/steps/steps.wxml

@@ -1,11 +1,11 @@
 <view class="cu-custom" style="height:{{CustomBar}}px;">
-  <view class="cu-bar fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
+  <view class="cu-bar fixed bg-gradual-pink" 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>
   </view>
 </view>
-<view class="cu-bar solid-bottom">
+<view class="cu-bar bg-white solid-bottom">
   <view class='action'>
     <text class='icon-title text-orange'></text> 基本用法
   </view>
@@ -36,7 +36,7 @@
     </view>
   </view>
 </view>
-<view class="cu-bar solid-bottom margin-top">
+<view class="cu-bar bg-white solid-bottom margin-top">
   <view class='action'>
     <text class='icon-title text-orange'></text> 数字完成
   </view>
@@ -51,7 +51,7 @@
     </view>
   </view>
 </view>
-<view class="cu-bar solid-bottom margin-top">
+<view class="cu-bar bg-white solid-bottom margin-top">
   <view class='action'>
     <text class='icon-title text-orange'></text> 多级显示
   </view>

demo/pages/component/swiper/swiper.wxml

@@ -1,11 +1,11 @@
 <view class="cu-custom" style="height:{{CustomBar}}px;">
-  <view class="cu-bar fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
+  <view class="cu-bar fixed bg-gradual-pink" 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>
   </view>
 </view>
-<view class="cu-bar">
+<view class="cu-bar bg-white">
   <view class='action'>
     <text class='icon-title text-pink'></text> 全屏限高轮播
   </view>
@@ -18,7 +18,7 @@
     <image src="https://image.weilanwl.com/img/4x3-{{index+1}}.jpg" mode='aspectFill'></image>
   </swiper-item>
 </swiper>
-<view class="cu-bar margin-top">
+<view class="cu-bar bg-white margin-top">
   <view class='action'>
     <text class='icon-title text-pink'></text> 卡片式轮播
   </view>
@@ -29,7 +29,7 @@
   </swiper-item>
 </swiper>
 
-<view class="cu-bar margin-top">
+<view class="cu-bar bg-white margin-top">
   <view class='action'>
     <text class='icon-title text-pink'></text> 堆叠式轮播
   </view>

demo/pages/component/timeline/timeline.wxml

@@ -1,5 +1,5 @@
 <view class="cu-custom" style="height:{{CustomBar}}px;">
-  <view class="cu-bar fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
+  <view class="cu-bar fixed bg-gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
     <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
       <text class='icon-back'></text>
       时间轴
@@ -65,7 +65,7 @@
           </view>
           <view class='action'>
             <view class='text-grey text-xs'>22:20</view>
-            <view class="cu-tag round grey sm">5</view>
+            <view class="cu-tag round bg-grey sm">5</view>
           </view>
         </view>
         <view class="cu-item">