微信小程序開發(fā)中如何實現(xiàn)搜索按鈕

發(fā)布時間：2022-03-23 10:01:11 來源：億速云閱讀：1075 作者：小新欄目：web開發(fā)

這篇文章給大家分享的是有關(guān)微信小程序開發(fā)中如何實現(xiàn)搜索按鈕的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

搜索input中，如何點擊搜索按鈕進行搜索及按鈕樣式修改

正常我們會在搜索框中加入一個搜索按鈕，點擊進行搜索，但是小程序不是操作dom的，所以是無法直接獲取到input中的值，所以要通過另外的方法進行搜索。

（1）通過input組件中的bindconfirm屬性（confirm-type="search" 可將軟鍵盤的完成按鈕改為“搜索”）

<input class='search_input' type='text' confirm-type='search' bindconfirm='toSearch' ></input>
//js部分
toSearch(e){
 console.log(e.detail.value) //e.detail.value 為input框輸入的值
}

（2）利用form表單的提交，來完成點擊按鈕的提交(input需要添加name屬性)

搜索按鈕

微信小程序開發(fā)中如何實現(xiàn)搜索按鈕

利用button代替form的表單提交(form-type="submit")，注意用view不行，必須用button

需要自己修改button的默認樣式（button的邊框要在button::after中修改）

//wxml部分
<form bindsubmit="formSubmit" bindreset="formReset">
 <input class='search_input' type='text' confirm-type='search' name="search" bindconfirm='toSearch' >
 <button class='search_btn' form-type='submit'>搜索</button></input>
</form>

//js部分
formSubmit(e){
 console.log(e.detail.value.search) //為輸入框的值，input記得添加name屬性
}

感謝各位的閱讀！關(guān)于“微信小程序開發(fā)中如何實現(xiàn)搜索按鈕”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

向AI問一下細節(jié)

微信小程序開發(fā)中如何實現(xiàn)搜索按鈕

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽