本文实例为大家分享了微信小程序实现搜索框功能的具体代码，供大家参考，具体内容如下

效果：

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;
} 
.search_input .navigator{
  background-color: #fff;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 15rpx;
  color: #999;
  font-size: 32rpx;
}

.js中：

如果是组件引用全局样式，需要加如下属性

options:{
      addGlobalClass:true,
  },

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• Node.JS如何模拟http发送请求，主要代码是什么

  首先需要安装模块request，然后代码如下：//模拟发送http请求varrequest=require("request");//get请求request('http://www.baidu.com',function(error,response,body){if(!error&&response.statusCode==200

• Vue如何实现列表渲染，应用有什么

  这篇文章主要为大家介绍了Vue的列表渲染，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助

• node.js部署方式及详细的过程是什么

  目前Nodejs开发中有很多痛点，其中有一个是修改完代码以后需要我们重启服务才能看到效果。这样一次次的杀进程、重启，杀进程、重启很让人头大。程序员是最痛恨重复工作的物种，之前有了解过的同学可能知道 forever 。 forever 可以帮我们解决上面的问题，通过对资源变化的检测做到变化后自动重启。开发阶段我们使用 nodefile.js 来启动另外由于Nodejs的单线程，任何异常都会导致整个

• React Fiber的创建怎样做，完整过程是什么

  这篇文章主要介绍了React Fiber结构的创建步骤，帮助大家更好的理解和学习使用React，感兴趣的朋友可以了解下

• Vue Router如何安装和配置，用法是什么

  Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。本文介绍下Vue Router的安装与使用