今天就跟大家聊聊有关微信小程序中怎么实现一个搜索框组件，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。
10余年的山西网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。营销型网站建设的优势是能够根据用户设备显示端的尺寸不同，自动调整山西建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。创新互联公司从事“山西网站设计”,“山西网站推广”以来，每个客户项目都认真落实执行。
search.wxml
取消
历史搜索
热门搜索
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};看完上述内容，你们对微信小程序中怎么实现一个搜索框组件有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注创新互联行业资讯频道，感谢大家的支持。
分享名称：微信小程序中怎么实现一个搜索框组件
标题来源：
http://jkwzsj.com/article/ppheec.html
