先上代碼：

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>

效果：

上面兩張圖片分別是搜索框的兩種狀態(tài)，非搜索狀態(tài)和搜索狀態(tài)，樣式很簡單，邏輯也不復(fù)雜，但是小程序的搜索和網(wǎng)頁的不一樣，網(wǎng)頁可以直接添加點擊事件但是，小程序不行，因為小程序的搜索和輸入分開，如果使用data-的話無疑會產(chǎn)生很多多余的代碼，慶幸的是小程序提供了form可以整合搜索和輸入，具體和已參考官方API。
本文主要講的是踩過的坑，
①搜索和重置必須使用按鈕，因為要使用button的formType。
②搜索事件和重置事件是綁定到form上的，而不是button。
③input必須添加一個name屬性，例如name=”search-input”，否則你是用e.detail.value是取不到值的
④confirm-type='search'是控制你的軟鍵盤的右下角顯示的文字
⑤到目前為止你的搜索按鈕可以正常使用，但是點擊的軟鍵盤的搜索按鈕，沒有任何效果，如果想要軟鍵盤的搜索按鈕同樣可以使用，首先在輸入框中添加indconfirm=”inputSearch”事件，然后測試你會發(fā)現(xiàn)，現(xiàn)在依然無法使用，但是卻使用了函數(shù)，這是因為當你使用軟鍵盤進行搜索時，獲取的值的方式是e.detail.value就可以而不是e.detail.value‘search-input',所以你需要修改一下你的搜索函數(shù)：

inputSearch: function (e) { //輸入框根據(jù)查詢條件搜索點擊事件
 // 獲取用戶輸入框中的值
 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;
，現(xiàn)在你的小程序搜索框可以使用了。

另外有一個布局問題，ios的小程序?qū)osition: fixed;很不友好，所有盡量使用position: absolute;代替它

總結(jié)

到此這篇關(guān)于微信小程序?qū)崿F(xiàn)搜索框功能及踩過的坑的文章就介紹到這了,更多相關(guān)微信小程序?qū)崿F(xiàn)搜索框內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論