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

上一篇: 深入聊一聊JS中new的原理与实现下一篇:javascript数据代理与事件详解分...

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

发布时间：2022-04-16 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了微信小程序实现搜索框功能，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

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

效果：

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

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

您可能感兴趣的文章:

脚本宝典总结

以上是脚本宝典为你收集整理的微信小程序实现搜索框功能全部内容，希望文章能够帮你解决微信小程序实现搜索框功能所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：微信小程序微信小程序

上一篇: 深入聊一聊JS中new的原理与实现下一篇:javascript数据代理与事件详解分...

猜你在找的JavaScript相关文章

html font标签如何设置字体大小？html font标签属性用法介绍 2022-05-16
vue3+TypeScript+vue-router的使用方法 2022-04-16
vue3获取当前路由地址 2022-04-16
如何利用React实现图片识别App 2022-04-16
JavaScript展开运算符和剩余运算符的区别详解 2022-04-16
微信小程序中使用vant框架的具体步骤 2022-04-16
Vue elementUI表单嵌套表格并对每行进行校验详解 2022-04-16
如何利用Typescript封装本地存储 2022-04-16
微信小程序中wxs文件的一些妙用分享 2022-04-16
JavaScript的Set数据结构详解 2022-04-16