您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關微信小程序開發中如何實現搜索按鈕的內容。小編覺得挺實用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。
搜索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屬性)
搜索按鈕
利用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屬性 }
感謝各位的閱讀!關于“微信小程序開發中如何實現搜索按鈕”這篇文章就分享到這里了,希望以上內容可以對大家有一定的幫助,讓大家可以學到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。