微信小程序中怎么實(shí)現(xiàn)一個(gè)搜索框組件

今天就跟大家聊聊有關(guān)微信小程序中怎么實(shí)現(xiàn)一個(gè)搜索框組件，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

10余年的山西網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開(kāi)發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。營(yíng)銷(xiāo)型網(wǎng)站建設(shè)的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整山西建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)公司從事“山西網(wǎng)站設(shè)計(jì)”,“山西網(wǎng)站推廣”以來(lái)，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

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>熱門(mén)搜索</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: {

 },

 /**
  * 組件的初始數(shù)據(jù)
  */
 data: {
  words: [],
  hots: [],
  books:[],
  isSearch:false,
  //給輸入的默認(rèn)值
  value:""
 },

 /**
  * 組件的方法列表
  */
 methods: {
  onConfirm(event) {
   let value = event.detail.value;
   // 只有在服務(wù)器上能搜索到的關(guān)鍵字才添加到緩存中
   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`
    })
  }
  // 新增短評(píng)
  addNewComment(id,content){
    return this.request({
      url:`/book/add/short_comment`,
      method:"POST",
      data:{
        book_id:id,
        content
      }
    })
  }
  // 獲取搜索結(jié)果
  getBookSearch(start,value){
    return this.request({
      url:`/book/search`,
      data:{
        start,
        q:value
      }
    })
  }
}
export {BookModel};

看完上述內(nèi)容，你們對(duì)微信小程序中怎么實(shí)現(xiàn)一個(gè)搜索框組件有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

本文名稱：微信小程序中怎么實(shí)現(xiàn)一個(gè)搜索框組件
URL網(wǎng)址：http://muchs.cn/article42/ppheec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、網(wǎng)站營(yíng)銷(xiāo)、全網(wǎng)營(yíng)銷(xiāo)推廣、網(wǎng)站制作、App開(kāi)發(fā)、ChatGPT

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容