先上程式碼：

wxml:

<!-- 頂部搜尋框 -->
<view class="inputcontainer">
 <view class="input" catchtap="inputSwitchStatus" wx:if="{{!edit}}">搜尋商品</view>
 <view class="edit" wx:else>
  <form bindsubmit="inputSearch" bindreset="inputReset">
  <text class="searchicon"></text>
  <input focus="true" type="text" name="search-input" confirm-type='search' bindconfirm="inputSearch"/>
  <button class="deleteicon cancel-btn-default-style" catchtap="inputReset" hover-class="clear-btn-hover" formType="reset"></button>
  <button class="cancel cancel-btn-default-style" hover-class="search-btn-hover" formType="submit">搜尋</button>
  </form>  
 </view> 
</view>

效果：

上面兩張圖片分別是搜尋框的兩種狀態，非搜尋狀態和搜尋狀態，樣式很簡單，邏輯也不復雜，但是小程式的搜尋和網頁的不一樣，網頁可以直接新增點選事件但是，小程式不行，因為小程式的搜尋和輸入分開，如果使用data-的話無疑會產生很多多餘的程式碼，慶幸的是小程式提供了form可以整合搜尋和輸入，具體和已參考官方API。
本文主要講的是踩過的坑，
①搜尋和重置必須使用按鈕，因為要使用button的formType。
②搜尋事件和重置事件是繫結到form上的，而不是button。
③input必須新增一個name屬性，例如name=”search-input”，否則你是用e.detail.value是取不到值的

inputSearch: function (e) { //輸入框根據查詢條件搜尋點選事件
 // 獲取使用者輸入框中的值
 let inputVaue = e.detail.value['search-input'] ? e.detail.value['search-input'] : e.detail.value;
 if (!inputVaue) {
  throw new Error('search input contents con not empty!');
  return ;
 }
 let searchUrl = "/product/index?keyword=" + inputVaue + "&fromindex=true";
 this.converterUrlAndRedirect(searchUrl);
 }

注意：

let inputVaue = e.detail.value[‘search-input'] ? e.detail.value[‘search-input'] : e.detail.value;
，現在你的小程式搜尋框可以使用了。

另外有一個佈局問題，ios的小程式對position: fixed;很不友好，所有儘量使用position: absolute;代替它

總結

到此這篇關於微信小程式實現搜尋框功能及踩過的坑的文章就介紹到這了,更多相關微信小程式實現搜尋框內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！