搜索框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样式、添加图片等等