本篇文章介紹了從零開發一個微信小程式搜尋元件的方法,希望對學習微信小程式開發的朋友有幫助!
如何從零開發微信小程式搜尋元件
#為元件設定一個容器,在容器中放置搜尋圖示、輸入框、清除文字按鈕和搜尋按鈕。
<view class="input-wrapper"> <icon class="search-icon"/> <input placeholder='{{placeholder}}' value='{{inputValue}}' bindinput='handleInput' bindconfirm='handleSearch' bindfocus='inputFocused'> </input> <view class="close-icon-wrapper"> <icon class="close-icon"/> </view> 搜索 </view>
元件樣式(推薦學習:小程式開發)
container:高度100 rpx,背景色# eee,flex 版面。
input-wrapper:高度 80 rpx,背景色 #fff,flex 佈局,border-radius: 20rpx。
search-icon:寬高 32 rpx。
input:字體和遊標顏色 #000,字體大小 32 rpx。
close-icon-wrapper:寬高 80 rpx,絕對定位。
text:搜尋按鈕寬 110 rpx,高 65 rpx,絕對定位,左邊框 2rpx solid #eee。
.container { background: #eee; height: 100rpx; width: 100%; display: flex; justify-content: center; align-items: center; } .input-wrapper { display: flex; align-items: center; height: 80rpx; width: 80%; background: #fff; border-radius: 20rpx; } .input-wrapper .search-icon { margin-left: 20rpx; width: 32rpx; height: 32rpx; } .input-wrapper input { margin-left: 10rpx; color: #000; font-size: 32rpx; caret-color: #000; width: 60%; } .input-wrapper .close-icon-wrapper{ position: absolute; left: 480rpx; width: 80rpx; height: 80rpx; background:#fff; display: flex; justify-content: center; align-items: center; } .input-wrapper .close-icon { width: 42rpx; height: 42rpx; } .input-wrapper text { position: absolute; right: 80rpx; width: 110rpx; height: 65rpx; padding: 0; background: #fff; display: flex; justify-content: center; align-items: center; font-size: 32rpx; border-left: 2rpx solid #eee; }
元件功能
#元件的建構器中要注意區分properties 和data,properties 中寫入元件的對外屬性,data 寫入組件的對內屬性。在本搜尋元件中 placeholder 和 value 從頁面傳來,所以它們寫在 properties 中,控制清除按鈕是否出現的 showCloseIcon 要寫在 data 中。
properties: { placeholder: { type: String, value: '搜索' // 如果页面不传placeholder,显示“搜索” }, inputValue: { type: String } }, data: { showCloseIcon: false, },
2、方法設定
事件流程
(1)遊標不聚焦,沒有任何輸入-顯示搜尋圖示、placeholder和搜尋按鈕。
(2)遊標聚焦,沒有任何輸入-遊標閃爍,顯示搜尋圖示、placeholder和搜尋按鈕。
(3)遊標聚焦,有輸入-遊標閃爍,顯示搜尋圖示、輸入文字、清除按鈕和搜尋按鈕。
(4)遊標不聚焦,有輸入-顯示搜尋圖示、輸入文字、清除按鈕和搜尋按鈕。
(5)按回車搜尋-清除按鈕隱藏。
(6)點選搜尋按鈕-清除按鈕隱藏。
由此可見,需要 input 元件的聚焦和鍵盤輸入事件。
<view placeholder='{{placeholder}}' value='{{inputValue}}' bindinput='handleInput' bindconfirm='handleSearch' bindfocus='inputFocused'> </view>
inputFocused:如果聚焦時,輸入框中有內容,顯示closeIcon;
handleInput:如果輸入時沒有內容,不顯示closeIcon,有內容,顯示closeIcon 並把值存入value。
handleSearch:點選回車後,不顯示 closeIcon。
triggerEvent:自訂元件觸發事件時,需要使用 triggerEvent 方法,指定事件名稱、detail物件和事件選項。
inputFocused(e) { if (e.detail.value !== '') { this.setData({ showCloseIcon: true, }); } }, handleInput(e) { if (e.detail.value == '') { this.setData({ showCloseIcon: false, }); } else { this.setData({ showCloseIcon: true, }); this.triggerEvent('handleInput', { value: e.detail.value }); } }, handleSearch() { // 点击键盘上的回车,调用此方法 this.setData({ showCloseIcon: false, }); console.log('handleSearch', this.data.inputValue); },
搜尋分別為 closeIcon 和 搜尋按鈕新增點擊事件。
分別為 closeIcon 和 搜尋按鈕新增點擊事件。
clearValue() { this.triggerEvent('handleInput', { value: '' }); this.setData({ showCloseIcon: false, }); }, onTap() { this.setData({ showCloseIcon: false, }); console.log('onTap', this.data.inputValue); },组件 json { component:true }
頁面 json
工程的名字是 cookbook,這裡元件前綴統一為 ck。
{ usingComponents:{ ck-input:/components/search/index } }
頁面 wxml
<input placeholder='搜你想吃的' inputValue={{inputValue}} bind:handleInput=handleInput> </input>
頁面 js
handleInput(e) { this.setData({ inputValue: e.detail.value, }); },
至此,搜尋元件已完成初步開發。
PHP中文網,大量jquery影片教學,歡迎學習!
以上是如何從零開發微信小程式搜尋元件的詳細內容。更多資訊請關注PHP中文網其他相關文章!