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: #fff">
      <van-icon slot="left" name="arrow-left" size="25px" color="#333" bind:click="backToParent"/>
      <text slot="title" style="color: #333;">钻石搜索</text>
    </van-nav-bar>

    <!-- tabs -->
    <view class="tab-view">
      <van-tabs swipeable bind:change="onTabChange" color="#2270D9" title-active-color="#2270D9" title-inactive-color="#8F8AA6">
        <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"></num-range>
  </view>

  <!--  底部视图  -->
  <view class="buttom_view">
    <button bindtap="onButtonPressed" id="clear">清空</button>
    <button bindtap="onButtonPressed" id="search">搜索</button>
  </view>
</view>