欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序?qū)崿F(xiàn)搜索框功能及踩過(guò)的坑

 更新時(shí)間:2020年06月19日 11:27:00   作者:babulongbo  
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)搜索框功能及踩過(guò)的坑,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

先上代碼:

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),樣式很簡(jiǎn)單,邏輯也不復(fù)雜,但是小程序的搜索和網(wǎng)頁(yè)的不一樣,網(wǎng)頁(yè)可以直接添加點(diǎn)擊事件但是,小程序不行,因?yàn)樾〕绦虻乃阉骱洼斎敕珠_(kāi),如果使用data-的話(huà)無(wú)疑會(huì)產(chǎn)生很多多余的代碼,慶幸的是小程序提供了form可以整合搜索和輸入,具體和已參考官方API。
本文主要講的是踩過(guò)的坑,
①搜索和重置必須使用按鈕,因?yàn)橐褂胋utton的formType。
②搜索事件和重置事件是綁定到form上的,而不是button。
③input必須添加一個(gè)name屬性,例如name=”search-input”,否則你是用e.detail.value是取不到值的
④confirm-type='search'是控制你的軟鍵盤(pán)的右下角顯示的文字
⑤到目前為止你的搜索按鈕可以正常使用,但是點(diǎn)擊的軟鍵盤(pán)的搜索按鈕,沒(méi)有任何效果,如果想要軟鍵盤(pán)的搜索按鈕同樣可以使用,首先在輸入框中添加indconfirm=”inputSearch”事件,然后測(cè)試你會(huì)發(fā)現(xiàn),現(xiàn)在依然無(wú)法使用,但是卻使用了函數(shù),這是因?yàn)楫?dāng)你使用軟鍵盤(pán)進(jìn)行搜索時(shí),獲取的值的方式是e.detail.value就可以而不是e.detail.value‘search-input',所以你需要修改一下你的搜索函數(shù):

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

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

總結(jié)

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

相關(guān)文章

最新評(píng)論