微信小程序?qū)崿F(xiàn)搜索框功能及踩過(guò)的坑
先上代碼:
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)文章
JavaScript實(shí)現(xiàn)圖片懶加載的三種常用方法總結(jié)
懶加載是一種對(duì)網(wǎng)頁(yè)性能優(yōu)化的方式,也是我們經(jīng)常會(huì)用到的技術(shù),這篇文章為大家整理了JavaScript實(shí)現(xiàn)圖片懶加載的三種常用方法,希望對(duì)大家有所幫助2023-06-06JavaScript手寫(xiě)實(shí)現(xiàn)一個(gè)簡(jiǎn)單的快捷鍵庫(kù)
前端開(kāi)發(fā)中,有時(shí)項(xiàng)目會(huì)遇到一些快捷鍵需求,比如綁定快捷鍵,展示快捷鍵,編輯快捷鍵等需求,所以本文就來(lái)用JavaScript手寫(xiě)一個(gè)簡(jiǎn)單的快捷鍵庫(kù)吧2024-02-02微信小程序商城項(xiàng)目之淘寶分類(lèi)入口(2)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崙?zhàn)商城系列之淘寶分類(lèi)入口,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-04-04實(shí)例詳解JSON取值(key是中文或者數(shù)字)方式
本文通過(guò)實(shí)例詳解JSON取值(key是中文或者數(shù)字)方式,非常不錯(cuò),具有參考借鑒價(jià)值,需要的的朋友參考下吧2017-08-08JavaScript中手動(dòng)實(shí)現(xiàn)Array.prototype.map方法
在前端開(kāi)發(fā)中,我們經(jīng)常需要對(duì)數(shù)組進(jìn)行操作和處理,本文主要介紹了JavaScript中手動(dòng)實(shí)現(xiàn)Array.prototype.map方法,具有一定的參考價(jià)值,感興趣的可以了解一下2024-02-02微信小程序?qū)Ш綑诨瑒?dòng)定位功能示例(實(shí)現(xiàn)CSS3的positionsticky效果)
這篇文章主要介紹了微信小程序?qū)Ш綑诨瑒?dòng)定位功能,可實(shí)現(xiàn)CSS3的positionsticky效果,涉及微信小程序事件監(jiān)聽(tīng)、狀態(tài)判斷及屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-01-01JavaScript碰撞檢測(cè)原理及其實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了JavaScript碰撞檢測(cè)原理及其實(shí)現(xiàn)代碼,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-03-03js獲取當(dāng)前年月日-YYYYmmDD格式的實(shí)現(xiàn)代碼
下面小編就為大家?guī)?lái)一篇js獲取當(dāng)前年月日-YYYYmmDD格式的實(shí)現(xiàn)代碼。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-068個(gè)JavaScript中高階函數(shù)的運(yùn)用分享
高階函數(shù)是指以函數(shù)作為參數(shù)的函數(shù),并且可以將函數(shù)作為結(jié)果返回的函數(shù)。本文整理了8個(gè)JavaScript中高階函數(shù)的運(yùn)用,需要的可以參考一下2023-04-04