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

2023-08-15 03:02:04 93

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

代码如下

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:1rpxsolid#eee;
border-bottom:1rpxsolid#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;
}
.searchinput{
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";
constkeyword=newKeyword();
constbookModel=newBookModel();
Component({
/**
*组件的属性列表
*/
properties:{

},

/**
*组件的初始数据
*/
data:{
words:[],
hots:[],
books:[],
isSearch:false,
//给输入的默认值
value:""
},

/**
*组件的方法列表
*/
methods:{
onConfirm(event){
letvalue=event.detail.value;
//只有在服务器上能搜索到的关键字才添加到缓存中
bookModel.getBookSearch(0,value).then(res=>{
if(res.total){
keyword.addHistory(value);
letwords=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";
classKeywordextendsHTTP{
getHistory(){
constwords=wx.getStorageSync('q')
if(words){
returnwords
}else{
return[];
}
}
addHistory(value){
varwords=this.getHistory();
consthas=words.includes(value);
if(value&&!has){
if(words.length>4){
words.pop()
}
words.unshift(value);
wx.setStorageSync('q',words)
}
}
getHotData(){
returnthis.request({
url:`/book/hot_keyword`
})
}
getKeyword(start,value){
returnthis.request({
url:`/book/search`,
data:{
start,
q:value
}
})
}
}
export{Keyword}

models/book

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

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

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

热门推荐

随机推荐

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