网络编程
位置:首页>> 网络编程>> JavaScript>> 微信小程序实现搜索框功能

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

作者:空谷丶幽兰  发布时间:2024-04-16 10:31:05 

标签:微信小程序,搜索框

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

效果:

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

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

来源:https://blog.csdn.net/yangaoyuan1999/article/details/116309336

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com