WeChat applet implements search box function

This article example shares the specific code for the WeChat applet to implement the search box function for your reference. The specific content is as follows

Effect:

wxml file:

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

The icon style needs to be imported into text, here we use iconfont
url is the page to be redirected

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

In .js:

If the component references the global style, you need to add the following attributes

options:{
      addGlobalClass:true,
  },

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.