小程序控件学习 搜索框search-box

搜索框search-box

在制作包含地图、商店之类的小程序时，经常会需要制作搜索框。以下是一些学习经验，好记性不如烂笔头。

只使用input组件会过于单调，功能是足够了，样式却不怎么好看。因此用view组件封装一下input达到较好的展示效果。
search-box.wxml如下：

<view class="search-bar">
  <input class='search-input' bindinput='getSuggest' placeholder='搜索'></input>
</view>

然后，search-box.wxml所用到的样式search-box.wxss如下：

.search-bar {
  width:100%; 
  height: 40px; 
  display: flex;
  align-items: center;/*垂直居中*/
  justify-content: center;/*水平居中*/
}

.search-input{
  border: 2px solid black;/*边框*/
  width: 90%;
  height: 30px;
  line-height: 30px;/*文字居中*/
  padding-left: 20rpx;/*左空格*/
  padding-right: 20rpx;/*右空格*/
}

最后，在对应的search-box.js文件添加input绑定的事件：

getSuggest: function (e) {
    let keyword = e.detail.value;
    console.log(keyword);
    /*想要的功能自由发挥*/
  },

如此，一个基本的search-box功能就做好了。想做的更好可以添加边框圆角，更改placeholder样式、添加图片等等