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

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

代码如下

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: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

?

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};

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