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

 list.wxml引入搜索文件

搜索文件的结构如下：

在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()
  },