今天就跟大家聊聊有关微信小程序中怎么实现一个搜索框组件，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。
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};看完上述内容，你们对微信小程序中怎么实现一个搜索框组件有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注编程网行业资讯频道，感谢大家的支持。
