Wechat----components 搜索组件2

components 搜索组件2

index.json 引用所需组件

{
  "component": true,
  "usingComponents": {
    "v-tag" : "/components/tag/index",
    "v-book": "/components/book/index",
    "v-loading": "/components/loading/index"
  }
}

index.wxml

<view class="container">

  <!-- header -->
  <view class="header">
    <view class="search-container">
      <image class="icon" src="images/search.png" />
      <input bind:confirm="onConfirm" value="{{q}}" placeholder-class='in-bar' placeholder='书籍名' class='bar'  auto-focus="true" />
      <image bind:tap="onDelete" class="cancel-img" src="images/cancel.png" />
    </view>
    <view class='cancel' bind:tap="onCancel">取消</view>
  </view>

  <!-- 历史搜索,热门搜索 -->
  <view wx:if="{{!searching}}">
    <view class="history">
      <view class="title">
        <view class="chunk"></view>
        <text>历史搜索</text>
      </view>

      <view class="tags">
        <v-tag bind:tapping="onConfirm" wx:key="" wx:for="{{historyWords}}" text="{{item}}" />
      </view>
    </view>

    <view class="history hot-search">
      <view class="title">
        <view class="chunk"></view>
        <text>热门搜索</text>
      </view>
        <view class="tags">
          <block wx:key="" wx:for="{{hotWords}}">
          <v-tag bind:tapping="onConfirm" text="{{item}}" />
          </block>
        </view>
    </view>
  </view>

  <!--  books -->
  <view class="books-container" wx:if="{{searching}}">
    <block wx:for="{{dataArray}}" wx:key="{{item.id}}">
      <v-book show-like="{{false}}" book="{{item}}" class="book" />
    </block>
  </view>


  <!-- loading -->
  <v-loading class='loading-center' wx:if="{{showLoadingIcon}}"/>
  <v-loading class="loading-bottom" wx:if="{{loading}}" />

  <view class='empty-tip' wx:if="{{noneResult}}">没有搜索到书籍</view>

</view>