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

更新时间：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 Clip奇思妙想之多彩渐变字效果
本篇我们用同样的原理，把文字用CLIP属性分的更细，分别着色，然后组合到一起，实现自左到右更精确的色彩渐变。问题是文字细化分割需要用到很多很多个元素，所以这里我们要用程序来控制，自动生成这些元素。
2008-11-11
Pixi.js实现可视化图形编辑器的方法
本文主要介绍了Pixi.js实现可视化图形编辑器的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-03-03
JavaScript中关于iframe滚动条的去除和保留
在开发中经常遇到去掉全部的滚动条，去掉右边的滚动条且保留底下的滚动条，去掉底下的滚动条且保留右边的滚动条，大家基于js是怎么实现的呢？下面小编通过本文给大家详细介绍下，对js iframe滚动条相关知识感兴趣的朋友一起学习吧
2016-11-11
Js得到radiobuttonlist选中值的两种方法(推荐)
下面小编就为大家带来一篇Js得到radiobuttonlist选中值的两种方法(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-08-08
JavaScript中的console.dir()函数介绍
这篇文章主要介绍了JavaScript中的console.dir()函数介绍,console.dir主要用来dump某些对象的详细信息,需要的朋友可以参考下
2014-12-12
js确认删除对话框效果的示例代码
本篇文章主要是对js确认删除对话框效果的示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-02-02
Bootstrap table使用方法记录
这篇文章主要为大家详细介绍了Bootstrap table的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-08-08
uniapp 实现自定义缩略滚动条效果
这篇文章主要介绍了uniapp 实现自定义缩略滚动条,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2024-08-08
TypeScript 数组Array操作的常用方法
本文主要介绍了TypeScript 数组Array操作的常用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-06-06
ES6新特性七：数组的扩充详解
这篇文章主要介绍了ES6新特性之数组的扩充,结合实例形式分析了ES6数组操作的常见方法与相关使用技巧,需要的朋友可以参考下
2017-04-04

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具