微信小程序实现搜索框功能

更新时间：2022年07月18日 15:01:04 作者：空谷丶幽兰

这篇文章主要为大家详细介绍了微信小程序实现搜索框功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

效果：

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,
  },

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

JS event使用方法详解
event代表事件的状态，例如触发event对象的元素、鼠标的位置及状态、按下的键等等。 event对象只在事件发生的过程中才有效。
2008-04-04
JS版微信6.0分享接口用法分析
这篇文章主要介绍了JS版微信6.0分享接口用法,结合实例形式分析了JS版微信6.0分享功能原理、接口调用方法与相关使用注意事项,需要的朋友可以参考下
2016-10-10
Javascript中Promise的四种常用方法总结
这篇文章主要给大家总结介绍了关于Javascript中Promise的四种常用方法，分别是处理异步回调、多个异步函数同步处理、异步依赖异步回调和封装统一的入口办法或者错误处理，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面来一起看看吧。
2017-07-07
JavaScript实现复选框全选或全取消操作
这篇文章主要为大家详细介绍了JavaScript实现复选框全选或全取消操作，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09
微信小程序调用远程接口给全局数组赋值代码实例
这篇文章主要介绍了微信小程序调用远程接口给全局数组赋值代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-08-08
Javascript仿PHP $_GET获取URL中的参数
这篇文章主要介绍了Javascript仿PHP $_GET获取URL中的参数代码实例,需要的朋友可以参考下
2014-05-05
JS/Jquery判断对象为空的方法
本文给大家分享的是JS/Jquery判断对象是不是空对象的方法，十分的简单实用，有需要的小伙伴可以参考下。
2015-06-06
使用ef6创建oracle数据库的实体模型遇到的问题及解决方案
这篇文章主要介绍了使用ef6创建oracle数据库的实体模型遇到的问题及解决方案,需要的朋友可以参考下
2017-11-11
JavaScript中5种调用函数的方法
这篇文章主要介绍了JavaScript中5种调用函数的方法,本文详细的介绍了Javascript中各种函数调用的方法及其原理,对于理解JavaScript的函数有很大的帮助,需要的朋友可以参考下
2015-03-03
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
这篇文章主要介绍了Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2020-09-09