【組件】微信小程序input搜索框的實現

開發小程序的過程，是一個學習知識，解決問題的過程，每當實現了一個需求，總會有很大的成就感，每天記錄一個開發過程中的細節。
實現效果如下：

官方參考鏈接：https://developers.weixin.qq.com/miniprogram/dev/component/input.html

wxml:

 <view class='page_row' bindtap="suo"> <view class="search"> <view class="df search_arr"> <icon class="searchcion" size='20' type='search'></icon> <input class="" disabled placeholder="請輸入關鍵字" value="{{searchValue}}"/> </view> </view> <view class='sousuo'>搜索</view> </view> 

wxss:

 .search{ width: 80%; } .search_arr { border: 1px solid #d0d0d0; border-radius: 10rpx; margin-left: 20rpx; } .search_arr input{ margin-left: 60rpx; height: 60rpx; border-radius: 5px; } .bc_text { line-height: 68rpx; height: 68rpx; margin-top: 34rpx; } .sousuo { margin-left: 15rpx; width: 15%; line-height: 150%; text-align: center; border: 1px solid #d0d0d0; border-radius: 10rpx; } .page_row{ display: flex; flex-direction: row } .searchcion { margin: 10rpx 10rpx 10rpx 10rpx; position: absolute; left:25rpx; z-index: 2; width: 20px; height: 20px; text-align: center; } 

注：

原文作者：祈澈姑娘技術博客：https://www.jianshu.com/u/05f416aefbe1
90后前端妹子，愛編程，愛運營，愛折騰。
堅持總結工作中遇到的技術問題，堅持記錄工作中所所思所見，歡迎大家一起探討交流。

關注「編程微刊」公眾號 ，在微信后台回復「領取資源」，獲取IT資源300G干貨大全。

公眾號回復“1”，拉你進程序員技術討論群.