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

这篇文章主要介绍了微信小程序 搜索框组件代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

代码如下

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。