微信小程序搜索框代码组件
2023-09-11 14:16:52 时间
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};
若本号内容有做得不到位的地方(比如:涉及版权或其他问题),请及时联系我们进行整改即可,会在第一时间进行处理。
请点赞!因为你们的赞同/鼓励是我写作的最大动力!
欢迎关注达叔小生的简书!
这是一个有质量,有态度的博客
相关文章
- 无法使用以下搜索标准找到 X.509 证书: StoreName“My”、StoreLocation“LocalMachine”、FindType“FindBySubjectName”、FindValue“MyWebSite”。
- 【华为OD机试真题 python】单词搜索【2022 Q4 | 200分】
- Vue - Ant Design Vue表格组件(Table)分页器(Pagination)带搜索条件调用接口进行分页查询
- 搜索账号 排行榜客户端 Mesa——谷歌揭开跨中心超速数据仓库的神秘面纱
- linux下使用grep在当前目录下搜索所有文件中含有的字符串
- 微信小程序搜索框代码组件
- 【付费推广】常见问题合集,搜索推广FAQ 2
- 微信 小程序组件 搜索分类 带缓存(终极 上线版)
- 《谷歌语义搜索》一1.5 语义搜索准备清单
- SwiftUI 音乐和网络大全之网络音乐播放App支持iTunes搜索与播放(教程含源码)
- macOS SwiftUI 字段和标签组件规范之 04 搜索框范围栏Search Fields
- 《人工智能:计算Agent基础》——3.5 无信息搜索策略
- windows开始菜单打不开,搜索打不开
- 【华为机试真题】专栏文章搜索说明
- 【leetcode】108:将有序数组转化为二叉搜索树
- 思博伦协助改进海上搜索与救援行动
- [LeetCode] 74. Search a 2D Matrix 搜索一个二维矩阵
- [LeetCode] Convert Sorted Array to Binary Search Tree 将有序数组转为二叉搜索树