微信小程序 自定义组件之 胶囊对齐 搜索FloatSearch

大家好哇，我是梦辛工作室的灵，最近又写了一个 ui组件，是与 微信小程序 胶囊所对齐的 一个搜索框，还带展开过度动画哦，老样子，先看效果图


效果还是不错的，然后来看下如何使用：
//先引入组件

  "usingComponents": {
    "float-search":"/components/FloatSearch/FloatSearch"
  },

//然后使用组件

 <float-search bindconfirm="doSearch" bindblur="doSearch" bindinput="doSearch" value="{{value}}" placeholder="{{placeholder}}" ></float-search>

属性基本和input 一致，得记得放到最顶端哦
然后看下 组件源代码：
FloatSearch.js

// components/FloatSearch/FloatSearch.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    value:{
      type:String,
      value:""
    },
    placeholder:{
      type:String,
      value:"请输入关键词"
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
     img_width:15,
     placeholder_temp:"",
     value_temp:"",
     input_focus:false
  },

  /**
   * 组件的方法列表
   */
  methods: {
    doOpenSearch(){
      let that = this;
      that.data.placeholder_temp = that.data.placeholder;
      that.data.value_temp = that.data.value;
      that.setData({
        placeholder:"",
        value:"",
        searchOpen:true
      })
      setTimeout(function(){
        that.setData({
          placeholder:that.data.placeholder_temp,
          value:that.data.value_temp,
          input_focus:true
        })
      },500)
    },
    onFocus(res){
      this.triggerEvent("focus",res.detail);
    },
    onBlur(res){
      this.setData({
        searchOpen:false
      })
      this.triggerEvent("blur",res.detail);
    },
    onInput(res){
      this.triggerEvent("input",res.detail);
    },
    onConfirm(res){
      this.triggerEvent("confirm",res.detail);
    }
  }, 
  ready(){
     // 获取距上
     const barTop = wx.getSystemInfoSync().statusBarHeight;
     // 获取胶囊按钮位置信息
     const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
     const barHeight = menuButtonInfo.height + (menuButtonInfo.top - barTop) * 2;
     this.setData({ 
       barHeight:barHeight,
       menuButtonInfo,
       barTop
     })
  }
})

FloatSearch.wxml

<!--pages/main/main.wxml-->
<view class="flex_row flex_vcenter nav_back" style="margin-top: {{barTop}}px;height: {{barHeight}}px;">
    <view  bindtap="doOpenSearch" class="search_bg flex_row flex_vcenter {{searchOpen?'open':''}}" style="width:{{menuButtonInfo.height}}px;height:{{menuButtonInfo.height}}px; border-radius:{{menuButtonInfo.height / 2}}px;">
        <image src="/images/ic_search.png" mode="aspectFit" style="margin-left: {{(menuButtonInfo.height - img_width) / 2 }}px;width: {{img_width}}px;height: {{img_width}}px;"></image>
        <input focus="{{input_focus}}" confirm-type="search" bindconfirm="onConfirm" bindfocus="onFocus" bindblur="onBlur" bindinput="onInput" class="input_class" value="{{value}}" placeholder="{{placeholder}}" style="margin-left:{{(menuButtonInfo.height - img_width) / 2 }}px;" />
    </view>
</view>

FloatSearch.json

{
  "component": true,
  "usingComponents": {}
}

FloatSearch.wxss

/* components/FloatSearch/FloatSearch.wxss */ 
.nav_back{
  width: 80vw;  
} 

.search_bg{
  background: rgba(255, 255, 255, 0.8); 
  margin-left: 5vw;
  transition: width .5s;
}

.search_bg .input_class{
  display: none;
}

.open  .input_class{
  display: flex;
}

.input_class{
  font-size: 12px;
  color: #000000;
  width: 20vw;
}

.open{
  width: 40vw !important;
} 
.flex_right{
  justify-content: right;
}
.flex_row, .flex_column {
  display: flex;
}

.flex_row {
  flex-direction: row;
}

.flex_column {
  flex-direction: column;
}

.flex_vcenter,.flex_center{
  align-items: center
}

.flex_hcenter,.flex_center{
  justify-content: center;
}

.flex_space{
  justify-content: space-between;
}
.flex_around{
  justify-content: space-around;
}
.flex_wrap{
  flex-wrap: wrap;
}
.flex_grow_1{
  flex-grow: 1;
}
.flex_end{
  align-items: flex-end;
  justify-content: flex-end;
}

就这样就可以了，手工