底部操作条

• 样式图例

• 示例代码

<view class="cu-bar tabbar bg-white">
    <view class="action">
      <view class="cuIcon-cu-image">
        <image src="/images/tabbar/basics_cur.png"></image>
      </view>
      <view class="text-green">元素</view>
    </view>
    <view class="action">
      <view class="cuIcon-cu-image">
        <image src="/images/tabbar/component.png"></image>
      </view>
      <view class="text-gray">组件</view>
    </view>
    <view class="action">
      <view class="cuIcon-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="cuIcon-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="cuIcon-homefill"></view> 首页
    </view>
    <view class="action text-gray">
      <view class="cuIcon-similar"></view> 分类
    </view>
    <view class="action text-gray">
      <view class="cuIcon-recharge"></view>
      积分
    </view>
    <view class="action text-gray">
      <view class="cuIcon-cart">
        <view class="cu-tag badge">99</view>
      </view>
      购物车
    </view>
    <view class="action text-gray">
      <view class="cuIcon-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="cuIcon-homefill"></view> 首页
    </view>
    <view class="action text-gray">
      <view class="cuIcon-similar"></view> 分类
    </view>
    <view class="action text-gray add-action">
      <button class="cu-btn cuIcon-add bg-green shadow"></button>
      发布
    </view>
    <view class="action text-gray">
      <view class="cuIcon-cart">
        <view class="cu-tag badge">99</view>
      </view>
      购物车
    </view>
    <view class="action text-gray">
      <view class="cuIcon-my">
        <view class="cu-tag badge"></view>
      </view>
      我的
    </view>
  </view>

• 样式图例

• 示例代码

 <view class="cu-bar tabbar bg-black">
    <view class="action text-green">
      <view class="cuIcon-homefill"></view> 首页
    </view>
    <view class="action text-gray">
      <view class="cuIcon-similar"></view> 分类
    </view>
    <view class="action text-gray add-action">
      <button class="cu-btn cuIcon-add bg-green shadow"></button>
      发布
    </view>
    <view class="action text-gray">
      <view class="cuIcon-cart">
        <view class="cu-tag badge">99</view>
      </view>
      购物车
    </view>
    <view class="action text-gray">
      <view class="cuIcon-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="cuIcon-service text-green">
        <view class="cu-tag badge"></view>
      </view>
      客服
    </button>
    <view class="action text-orange">
      <view class="cuIcon-favorfill"></view> 已收藏
    </view>
    <view class="action">
      <view class="cuIcon-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="cuIcon-service text-green">
        <view class="cu-tag badge"></view>
      </view>
      客服
    </button>
    <view class="action">
      <view class="cuIcon-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="cuIcon-service text-green">
        <view class="cu-tag badge"></view>
      </view>
      客服
    </button>
    <view class="action">
      <view class=" cuIcon-shop"></view> 店铺
    </view>
    <view class="action">
      <view class="cuIcon-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="cuIcon-service text-green">
        <view class="cu-tag badge"></view>
      </view> 客服
    </button>
    <view class="action">
      <view class="cuIcon-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>