ColorUI/pages/bar/bar.wxml

<view class="bar" wx:if="{{barName=='normIcon'}}">
  <view class='text-lg'>
    <text class=' iconfont icon-titles warning-text ml-sm'></text> 猜你喜欢
  </view>
</view>

<view class="bar mt-sm" wx:if="{{barName=='normIcon'}}">
  <view class='text-lg'>
    <text class=' iconfont icon-title success-text ml-sm'></text> 备注说明
  </view>
</view>

<view class="bar mt-sm" wx:if="{{barName=='normIcon'}}">
  <view class='text-lg'>
    <text class='iconfont icon-back gray-text ml-sm'></text> 返回
  </view>
</view>

<view class="bar gray" wx:if="{{barName=='background'}}">
  <view class='text-lg'>
    <text class='iconfont icon-back ml-sm'></text> 返回
  </view>
</view>
<view class="bar primary mt-sm" wx:if="{{barName=='background'}}">
  <view class='text-lg'>
    <text class='iconfont icon-back ml-sm'></text> 返回
  </view>
</view>
<view class="bar secondary mt-sm" wx:if="{{barName=='background'}}">
  <view class='text-lg'>
    <text class='iconfont icon-back ml-sm'></text> 返回
  </view>
</view>
<view class="bar success mt-sm" wx:if="{{barName=='background'}}">
  <view class='text-lg'>
    <text class='iconfont icon-back ml-sm'></text> 返回
  </view>
</view>
<view class="bar warning mt-sm" wx:if="{{barName=='background'}}">
  <view class='text-lg'>
    <text class='iconfont icon-back ml-sm'></text> 返回
  </view>
</view>
<view class="bar danger mt-sm" wx:if="{{barName=='background'}}">
  <view class='text-lg'>
    <text class='iconfont icon-back ml-sm'></text> 返回
  </view>
</view>

<view class="bar justify-between" wx:if="{{barName=='center'}}">
  <view class='text-df'>
    <text class='iconfont icon-back ml-sm text-lg'></text> 返回
  </view>
  <view class='bar-text'>操作条/Bar </view>
  <view class='text-df'>
    <text class='iconfont icon-share mr-sm text-lg'></text>
  </view>
</view>

<view class="bar" wx:if="{{barName=='serach'}}">
  <view class='serach-form'>
    <text class="iconfont icon-search"></text>
    <input type="text" class="search-input sub" placeholder="搜索图片、文章、视频" confirm-type="search" />
  </view>
  <button class='success btn sm mr-sm'>分类
    <text class='iconfont icon-similar'></text>
  </button>
</view>

<view class="bar success" wx:if="{{barName=='serachRound'}}">
  <image src="http://www.diwuyuan.com/bbs/uc_server/data/avatar/000/00/02/52_avatar_big.jpg" class='round mh-sm'></image>
  <view class='serach-round'>
    <text class="iconfont icon-search"></text>
    <text>搜索图片、文章、视频</text>
  </view>
  <view class='mh-sm text-sm'>广州
    <text class="iconfont icon-triangledownfill"></text>
  </view>
</view>

<view class="bar topfix shadow" wx:if="{{barName=='topfix'}}">
  <view class='text-lg'>
    <text class='iconfont icon-back ml-sm'></text> 返回
  </view>
</view>

<view class="bar bottomfix shadow justify-center" wx:if="{{barName=='bottomfix'}}">
  <button class='btn success round basis-sm'>提交保存</button>
</view>
<view class="bar bottomfix shadow btns" wx:if="{{barName=='bottomfixBtns'}}">
  <view class='flex-sub solid-right'>
    <view class="text-xs gray-text">
      <view class='iconfont icon-service success-text text-lg'></view>
      <text class='badge mark-badge cur'></text> 客服
    </view>
  </view>
  <view class='flex-sub solid-right text-sm'>
    <view class="text-xs gray-text">
      <view class='iconfont icon-shop warning-text text-lg'></view>
      店铺
    </view>
  </view>
  <view class='flex-sub text-sm'>
    <view class="text-xs gray-text">
      <view class='iconfont icon-cart warning-text text-lg'></view>
      <text class='badge mark-badge'>99</text> 购物车
    </view>
  </view>
  <view class='danger flex-twice'>立即订购</view>
</view>

<view class="bar bottomfix shadow bar-textarea" wx:if="{{barName=='bottomfixInput'}}">
  <input class='flex-sub solid-bottom ml-sm' focus="true" maxlength="300" cursor-spacing="10"></input>
  <button class='success btn mh-sm'>发送</button>
</view>

<view class="{{barName=='topfix'?'fixed-page':''}}">
  <view class="nav-list {{barName==item.name?'cur':''}}" wx:for="{{nav}}" wx:key="{{index}}" bindtap='setName' data-name='{{item.name}}'>
    <view class="nav-title">{{item.title}}</view>
    <view class="iconfont icon-right"></view>
  </view>
</view>

<image src='/images/skin.jpg' mode='widthFix' class="fixed-image mt-df" wx:if="{{barName=='topfix'||barName=='bottomfixBtns'||barName=='bottomfixInput'}}"></image>