小程序-mpsearch搜索

小程序用第三方组件 wechat-miniprogram / weui，需要注意引入 <mp-searchbar ext-class="inputlable" class="search-content" />组件之后，不能在组件的引用类上设置高度，比如给.inputlable 类行高可以设置36px，可能会出现覆盖前面的布局内容，所以防止布局错乱需要小心。

 

设置输入框提示居左显示

.search-content{
  width: 380rpx;
  height: 50rpx;
  overflow: hidden;
  background-color: transparent !important;
}

.search-content .weui-search-bar__form{
  height: 50rpx;
  border-radius: 6rpx;
  overflow: hidden;
}
.search-content .weui-search-bar__box{
  height: 50rpx;
}

.search-content .weui-search-bar__box .weui-search-bar__input:placeholder {
  text-align: left !important;
  font-size: 22rpx;
}

.weui-search-bar__label {
  text-align: left !important;
  position: relative !important;
}

 

 

输入框文本 textarea设置样式，行内容居中显示，auto-height="true"

.txtarea{
    margin-top: 10rpx
    padding: 20rpx 10rpx;
    border: 2rpx solid #eee;
    background-color: #fff      
}