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

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

代码如下

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

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