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

成都創(chuàng)新互聯(lián)公司網(wǎng)站建設(shè)公司，提供成都網(wǎng)站建設(shè)、成都做網(wǎng)站，網(wǎng)頁設(shè)計(jì)，建網(wǎng)站，PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);可快速的進(jìn)行網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展；專業(yè)做搜索引擎喜愛的網(wǎng)站，是專業(yè)的做網(wǎng)站團(tuán)隊(duì)，希望更多企業(yè)前來合作!

搜索input中，如何點(diǎn)擊搜索按鈕進(jìn)行搜索及按鈕樣式修改

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

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

//js部分
toSearch(e){
 console.log(e.detail.value) //e.detail.value 為input框輸入的值
}

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

搜索按鈕

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

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

//wxml部分

 
 搜索

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

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