本文例項為大家分享了微信小程式實現搜尋框功能的具體程式碼，供大家參考，具體內http://www.cppcns.com容如下

效果：

wxml檔案:

<view class="search_input" >客棧
        <navigator url="/pages/search/search" open-type="navigate" class="navigator">
       <text class="iconfont icon-guanbi"></text> 搜尋
        </navigator>
</view> 

text中需要匯入圖示樣式，這裡利用的是iconfont
url是要跳轉的頁面

.search_input {
  height: 90rpx;
  background-color: #eb4450;
  padding: 10rpx;
} 
.se程式設計客棧arch_input .navigator{
  background-color: #fff;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 15rpx;
  color: #999;
  font-size: 32rpx;
}

.中：

如果是元件引用全域性樣式，需要加如下屬性

options:{
      addGlobalClass:true,},

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。