小程序-实现列表- 搜索功能的实现（6）

 list.wxml引入搜索文件

<!-- 引入搜索框 -->
<include src="/includes/search-bar.wxml"/>

搜索文件的结构如下：

<view class="weui-search-bar">
    <!-- 1  搜索-->
    <view class="weui-search-bar__form">
        <!-- 1.1 靠左显示的搜索：图片、输入框、图片组合,z-index: 1;在1.2下面-->
        <view class="weui-search-bar__box">
            <!-- 1 搜索图标 -->
            <icon class="weui-icon-search_in-box" type="search" size="14" bindtap="searchHandle"/>
            <!-- 2 输入框值 -->
            <input type="text" class="weui-search-bar__input" 
                placeholder="搜索" 
                value="{{searchText}}" 
                focus="{{searchShowed}}" 
                bindinput="searchChangeHandle" 
                bindconfirm="searchHandle" />
            <!-- 有文字时出现X删除-->
            <view class="weui-icon-clear" wx:if="{{searchText}}" bindtap="clearSearchHandle">
                <icon type="clear" size="14" />
            </view>
        </view>
        <!-- 1.2 居中显示的搜索：图片和文字组合，z-index: 2;覆盖在1.1上面-->
        <label class="weui-search-bar__label" hidden="{{searchShowed}}" bindtap="showSearchHandle">
            <icon class="weui-icon-search" type="search" size="14" />
            <view class="weui-search-bar__text">搜索</view>
        </label>
    </view>
    <!-- 2 获取焦点时，显示取消  -->
    <view class="weui-search-bar__cancel-btn" hidden="{{!searchShowed}}" bindtap="hideSearchHandle">取消</view>
</view>

在list.js页面完成搜索的逻辑，初始化数据：

data: {
    category: {},//分类
    shops: [],//列表
    pageIndex: 0,//当前页码
    pageSize: 20,//每页条数
    totalCount: 0,//总条数
    hasMore: true,//是否加载更多
    searchShowed: false,//控制搜索状态的显示
    searchText: '',//查询文字
    lastRequestTime:0//上次加载的时间
  },

在list.js页面完成搜索的逻辑：

1 点击居中的输入框触发showSearchHandle()，用来控制居中的输入框隐藏、靠左的输入框获取到焦点、“取消”显示；

2 点击“取消”文字触发hideSearchHandle()，居中的搜索显示，因为居中的搜索z-index:2；还原初始化查询条件，保持初始数据；

3 输入框有文字时，点击X清除触发clearSearchHandle()，清除输入框的文字；

4 输入框文字同步渲染到页面 searchChangeHandle(e)；

5 输入文字，点击键盘、搜索图标完成键进行搜索触发 searchHandle()，实现查询条件的搜索功能
 

// 搜索文件涉及的方法
  // 1 点击输入框，居中的搜索hidden
  showSearchHandle() {
      this.setData({
          searchShowed: true
      })
  },
  // 2 点击“取消”文字，文字清空，居中的搜索显示，因为居中的搜索z-index:2
  hideSearchHandle() {
      this.setData({
        shops: [],
        pageIndex: 0,
        totalCount: 0,
        hasMore: true,
        searchText: '',
        searchShowed: false,
      })
    this.loadMore()
  },
  // 3 输入框有文字时，点击X清除
  clearSearchHandle() {
      this.setData({
          searchText: ''
      })
  },
  // 4 输入框文字同步到页面
  searchChangeHandle(e) {
      this.setData({
          searchText: e.detail.value
      })
  },
  // 5 输入文字，点击键盘、搜索图标完成键进行搜索
  searchHandle() {
      this.setData({
          shops: [],
          pageIndex: 0,
          totalCount: 0,
          hasMore: true
      })
      this.loadMore()
  },