wxappb2b/GuangZuan/miniprogram/mHome/pages/search/index.wxml

<view class="container" style="position: relative; padding-bottom: {{ safeBottom }}px;"> 
  <!-- TopView -->
  <view class="top-view">
    <!-- 导航栏 -->
    <van-nav-bar custom-style="background-color: #407DB8">
      <van-icon slot="left" name="arrow-left" size="25px" color="#fff" bind:click="backToParent"/>
      <text slot="title" style="color: #fff;">钻石搜索</text>
    </van-nav-bar>

    <!-- tabs -->
    <view class="tab-view">
      <van-tabs swipeable bind:change="onTabChange" color="#2270D9" line-width="20px" title-inactive-color="#333" title-active-color="#407DB8">
        <van-tab wx:for="{{ tabs }}" wx:for-item="itm" wx:key="id" id="{{ itm.id }}" title="{{ itm.name }}"/>
      </van-tabs>  
    </view>
  </view>

  <!-- 形状 -->
  <view class="cell-view shape"> 
    <text>形状</text>
    <view class="content shape">
      <button wx:for="{{ shapes }}" wx:for-item="itm" wx:for-index="idx" class="{{ itm.isCheck ? 'active' : '' }}" id="shape {{ itm.id }}" wx:key="id" bindtap="onButtonPressed">{{ itm.name }}</button>
    </view>
  </view>

  <!-- 颜色 -->
  <view class="cell-view color"> 
    <text>颜色</text>
    <view class="content color">
      <button wx:for="{{ colors }}" wx:for-item="itm" wx:for-index="idx" wx:key="id" class="{{ itm.isCheck ? 'active' : '' }}" id="color {{ itm.id }}" bindtap="onButtonPressed">{{ itm.name }}</button>
    </view>
  </view>

  <!-- 净度 -->
  <view class="cell-view neatness"> 
    <text>净度</text>
    <view class="content neatness">
      <button wx:for="{{ neatness }}" wx:for-item="itm" wx:for-index="idx" wx:key="id" class="{{ itm.isCheck ? 'active' : '' }}" id="neatness {{ itm.id }}" bindtap="onButtonPressed">{{ itm.name }}</button>
    </view>
  </view>

  <!-- 切工 -->
  <view class="cell-view qiegong"> 
    <text>切工</text>
    <view class="content qiegong">
      <button wx:for="{{ qiegongs }}" wx:for-item="itm" wx:for-index="idx" wx:key="id" class="{{ itm.isCheck ? 'active' : '' }}" id="qiegong {{ itm.id }}" bindtap="onButtonPressed">{{ itm.name }}</button>
    </view>
  </view>

  <!-- 对称 -->
  <view class="cell-view duicheng"> 
    <text>对称</text>
    <view class="content duicheng">
      <button wx:for="{{ duichengs }}" wx:for-item="itm" wx:for-index="idx" wx:key="id" class="{{ itm.isCheck ? 'active' : '' }}" id="duicheng {{ itm.id }}" bindtap="onButtonPressed">{{ itm.name }}</button>
    </view>
  </view>

  <!-- 抛光 -->
  <view class="cell-view polishing"> 
    <text>抛光</text>
    <view class="content polishing">
      <button wx:for="{{ paoguangs }}" wx:for-item="itm" wx:for-index="idx" wx:key="id" class="{{ itm.isCheck ? 'active' : '' }}" id="polishing {{ itm.id }}" bindtap="onButtonPressed">{{ itm.name }}</button>
    </view>
  </view>

  <!-- 荧光 -->
  <view class="cell-view yingguang"> 
    <text>荧光</text>
    <view class="content yingguang">
      <button wx:for="{{ yingguangs }}" wx:for-item="itm" wx:for-index="idx" wx:key="id" class="{{ itm.isCheck ? 'active' : '' }}" id="yingguang {{ itm.id }}" bindtap="onButtonPressed">{{ itm.name }}</button>
    </view>
  </view>

  <!-- 货币 -->
  <view class="cell-view currency"> 
    <text>货币</text>
    <view class="content currency">
      <button wx:for="{{ currencys }}" wx:for-item="itm" wx:for-index="idx" wx:key="id" class="{{ itm.isCheck ? 'active' : '' }}" id="currency {{ itm.id }}" bindtap="onButtonPressed">{{ itm.name }}</button>
    </view>
  </view>

  <!-- 证书 -->
  <view class="cell-view certificate"> 
    <text>证书</text>
    <view class="content certificate">
      <button wx:for="{{ certificates }}" wx:for-item="itm" wx:for-index="idx" wx:key="id" class="{{ itm.isCheck ? 'active' : '' }}" id="certificate {{ itm.id }}"  bindtap="onButtonPressed">{{ itm.name }}</button>
    </view>
  </view>

  <!-- 克拉重量 -->
  <view class="cell-view ctweight"> 
    <text class="label">克拉重量</text>
    <num-range min="{{ minweight }}" max="{{ maxweight }}" bind:sync="syncNumRange" />
  </view>

  <!--  底部视图  -->
  <view class="buttom_view">
    <van-button block round bind:click="onButtonPressed" color="linear-gradient(to right, #999, #aaa)" id="clear">清空</van-button>
    <van-button block round bind:click="onButtonPressed" color="linear-gradient(to right, #4bb0ff, #666)" id="search">搜索</van-button>
  </view>
</view>