2023年7月9日发(作者：)

微信⼩程序搜索框组件代码实例这篇⽂章主要介绍了微信⼩程序 搜索框组件代码实例,⽂中通过⽰例代码介绍的⾮常详细，对⼤家的学习或者⼯作具有⼀定的参考学习价值,需要的朋友可以参考下代码如下 取消 历史搜索 热门搜索 { 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;}// components/search/rt { 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 = ; // 只有在服务器上能搜索到的关键字才添加到缓存中 kSearch(0, value).then(res => { if () { tory(value); let words = tory(); a({ words, books:, isSearch:true }) }// (res); }) }, onToggle() { a({ value: "", isSearch:false }) }, onCancel() { a({ isSearch: false }) } }, attached() { // tory(); a({ words: tory() }) Data().then(res => { // (); a({ hots: }) }) }})models/keywordimport {HTTP} from "../utils/http-p";class Keyword extends HTTP{ getHistory(){ const words = rageSync('q') if(words){ return words }else{ return []; } } addHistory(value){ var words = tory(); const has = es(value); if(value && !has){ if(>4){ () } t(value); rageSync('q', words) } } getHotData(){ return t({ url:`/book/hot_keyword` }) } getKeyword(start,value){ return t({ url:`/book/search`, data:{ start, q:value } }) }}export {Keyword}models/bookimport {HTTP} from "../utils/http-p";class BookModel extends HTTP{ getHotBook(){ return t({ url:"/book/hot_list" }) } getBookDateil(id){ return t({ url:`/book/${id}/detail` }) } getBookComment(id){ return t({ url:`/book/${id}/short_comment` }) } getBookLike(id){ return t({ url:`/book/${id}/favor` }) } // 新增短评 addNewComment(id,content){ return t({ url:`/book/add/short_comment`, method:"POST", data:{ book_id:id, content } }) } // 获取搜索结果 getBookSearch(start,value){ return t({ url:`/book/search`, data:{ start, q:value } }) }}export {BookModel};以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。