这篇文章主要介绍了微信小程序 搜索框组件代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
代码如下
search.wxml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | < 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
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | .header{ position : fixed ; top : 0 ; left : 0 ; z-index : 300 ; height : 100 rpx; display : flex; padding-left : 20 rpx; padding-right : 20 rpx; align-items: center ; border-top : 1 rpx solid #eee ; border-bottom : 1 rpx solid #eee ; flex- direction : row; background : #fff ; } .search{ width : 530 rpx; height : 70 rpx; background : rgb ( 245 , 245 , 245 ); border-radius: 30 rpx; padding-left : 20 rpx; display : flex; align-items: center ; } .search input{ flex: 1 ; margin-left : 20 rpx; } .cancel{ height : 70 rpx; border-radius: 30 rpx; line-height : 70 rpx; border-color : #888 ; } .container{ margin-top : 100 rpx; padding : 20 rpx; } .title{ display : flex; height : 90 rpx; align-items: center ; } .line{ height : 40 rpx; width : 10 rpx; background : #333 ; } .result{ margin-top : 100 rpx; padding-left : 90 rpx; padding-right : 90 rpx; display : flex; flex-wrap: wrap; justify- content : space-between; } v-book{ margin-bottom : 60 rpx; } |
search.js
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 | // 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
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | 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
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | 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}; |
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持主机吧。