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

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

代码如下

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

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