微信小程序 搜索框组件代码实例

<view class="header">  <view class="search">    <icon type="search" size="18" color="">    </icon>    <input type="text" confirm-type="search" bindconfirm="onConfirm" value="{{value}}" />    <icon type="clear" size="18" bind:tap="onToggle" />  </view>  <button bind:tap="onCancel" plain="{{true}}" class="cancel">取消</button></view><view class="container" wx:if="{{!isSearch}}">  <view class="title">    <view class="line"></view>    <text>历史搜索</text>  </view>  <view class="history-container">    <block wx:for="{{words}}" wx:key="{{index}}">      <v-tag content="{{item}}" bind:comment="onConfirm"></v-tag>    </block>  </view>  <view class="title">    <view class="line"></view>    <text>热门搜索</text>  </view>  <view class="history-container">    <block wx:for="{{hots}}" wx:key="{{index}}">      <v-tag content="{{item}}" bind:comment="onConfirm"></v-tag>    </block>  </view></view><view class="result" wx:if="{{isSearch}}" >  <block wx:for="{{books}}" wx:key="index">    <v-book book="{{item}}"></v-book>  </block></view>

.header{  position: fixed;  top:0;  left: 0;  z-index: 300;  height:100rpx;  display: flex;  padding-left:20rpx;  padding-right:20rpx;  align-items: center;  border-top: 1rpx solid #eee;  border-bottom: 1rpx solid #eee;  flex-direction: row;  background: #fff;}.search{  width:530rpx;  height:70rpx;  background: rgb(245, 245, 245);  border-radius:30rpx;  padding-left: 20rpx;  display: flex;  align-items: center;}.search input{  flex:1;  margin-left: 20rpx;}.cancel{  height:70rpx;  border-radius: 30rpx;  line-height: 70rpx;  border-color: #888;}.container{  margin-top: 100rpx;  padding: 20rpx;}.title{  display: flex;  height:90rpx;  align-items: center;}.line{  height:40rpx;  width:10rpx;  background: #333;}.result{  margin-top: 100rpx;  padding-left:90rpx;  padding-right:90rpx;  display: flex;  flex-wrap: wrap;  justify-content: space-between;}v-book{  margin-bottom: 60rpx;}

// components/search/search.jsimport { Keyword } from "../../models/keyword";import { BookModel } from "../../models/book";const keyword = new Keyword();const bookModel = new BookModel();Component({ /**  * 组件的属性列表  */ properties: { }, /**  * 组件的初始数据  */ data: {  words: [],  hots: [],  books:[],  isSearch:false,  //给输入的默认值  value:"" }, /**  * 组件的方法列表  */ methods: {  onConfirm(event) {   let value = event.detail.value;   // 只有在服务器上能搜索到的关键字才添加到缓存中   bookModel.getBookSearch(0, value).then(res => {    if (res.total) {     keyword.addHistory(value);     let words = keyword.getHistory();     this.setData({      words,      books:res.books,      isSearch:true     })    }// console.log(res);   })  },   onToggle() {   this.setData({    value: "",    isSearch:false   })  },  onCancel() {   this.setData({    isSearch: false   })  } }, attached() {  // keyword.getHistory();  this.setData({   words: keyword.getHistory()  })  keyword.getHotData().then(res => {   // console.log(res.hot);   this.setData({    hots: res.hot   })  }) }})

import {HTTP} from "../utils/http-p";class Keyword extends HTTP{  getHistory(){    const words = wx.getStorageSync('q')    if(words){      return words    }else{      return [];    }  }  addHistory(value){    var words = this.getHistory();    const has = words.includes(value);    if(value && !has){      if(words.length>4){        words.pop()      }      words.unshift(value);      wx.setStorageSync('q', words)    }  }  getHotData(){    return this.request({      url:`/book/hot_keyword`    })  }  getKeyword(start,value){    return this.request({      url:`/book/search`,      data:{        start,        q:value      }    })  }}export {Keyword}

import {HTTP} from "../utils/http-p";class BookModel extends HTTP{  getHotBook(){    return this.request({      url:"/book/hot_list"    })  }  getBookDateil(id){    return this.request({      url:`/book/${id}/detail`    })  }  getBookComment(id){    return this.request({      url:`/book/${id}/short_comment`    })  }  getBookLike(id){    return this.request({      url:`/book/${id}/favor`    })  }  // 新增短评  addNewComment(id,content){    return this.request({      url:`/book/add/short_comment`,      method:"POST",      data:{        book_id:id,        content      }    })  }  // 获取搜索结果  getBookSearch(start,value){    return this.request({      url:`/book/search`,      data:{        start,        q:value      }    })  }}export {BookModel};