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

search.wxml

<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>

search.wxss

.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;
}

search.js

// components/search/search.js
import { 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
      })
    })
  }
})

models/keyword

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}

models/book

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};

---

若本号内容有做得不到位的地方（比如：涉及版权或其他问题），请及时联系我们进行整改即可，会在第一时间进行处理。

---

请点赞！因为你们的赞同/鼓励是我写作的最大动力！

欢迎关注达叔小生的简书！

这是一个有质量，有态度的博客