微信小程序实现搜索框功能
2021-11-09 04:08
1196 查看
本文实例为大家分享了微信小程序实现搜索框功能的具体代码,供大家参考,具体内容如下
效果:
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, },
以上就是本文的全部内容,希望对大家的学习有所帮助
您可能感兴趣的文章:相关文章推荐
- 微信小程序_实现输入框带搜索记录功能
- 微信小程序之"搜索历史"功能实现
- [微信小程序]搜索功能实现,搜索框样式
- 微信小程序商城实现搜索商品功能
- 微信小程序实现搜索历史功能
- 基于java的微信小程序的实现(十)用户搜索及热搜词相关功能后端实现
- 微信小程序实现简单搜索功能含c#后台解析和部分代码
- 微信小程序搜索分页功能实现
- 微信小程序首页的分类功能和搜索功能的实现思路及代码详解
- 微信小程序云开发模糊搜索功能的实现
- 微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)
- 微信小程序实现搜索功能
- 微信小程序实现微信支付功能!!!
- 小程序实现搜索框功能
- 微信小程序实现随机验证码功能
- 第一章 “我要点爆”微信小程序云开发之项目建立与我的页面功能实现
- 微信小程序与内嵌网页交互实现支付功能
- 微信小程序实现日历功能
- 微信小程序实现点击拍照长按录像功能的实现代码
- 微信小程序实现tab栏切换功能