亲宝软件园·资讯

展开

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

空谷丶幽兰 人气:0
想了解微信小程序实现搜索框功能的相关内容吗,空谷丶幽兰在本文为您仔细讲解微信小程序搜索框功能的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:微信小程序,搜索框,下面大家一起来学习吧。

效果:

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

加载全部内容

相关教程
猜你喜欢
用户评论