小程序 文本框 聚焦样式改变

实现结果：

wxmL:

 <view class='search'>
      <input placeholder-class="{{status==0 ? 'placeholder':'placeholder-active'}}" placeholder='搜索科室'  bindfocus="focus"  bindblur='blur'></input>
      <image src='{{SearchSrc}}' class="{{status==0 ? 'search-img':'search-img-nomal'}}"></image>
  </view>

js:

data:{
status:0,
}
 /* 文本框聚焦时更改状态*/
  focus: function (e) {
    this.setData({
      status: 1
    })
  },
  /* 文本框失焦时更改状态*/
  blur: function (e) {
    this.setData({
      status: 0
    })
  }

wxss:

.search{
  margin: 0 30rpx;
  height: 90rpx;
  position: relative;
}
.search>input{
  position: relative;
  background: #FFFFFF;
  top: 20rpx;
  height: 70rpx;
  border-radius: 15rpx;
  padding-left: 80rpx;
}
.placeholder{
  text-align: center;
  font-size: 32rpx;
  left: -40rpx;
}
.placeholder-active{
  display: none;
}
.search-img {
  width: 40rpx;
  height: 40rpx;
  position: absolute;
  z-index: 999;
  left: 230rpx;
  top: 30rpx;
}
.search-img-nomal{
  width: 40rpx;
  height: 40rpx;
  position: absolute;
  z-index: 999;
  left:30rpx;
  top: 30rpx;
}

原理：

bindfocus是监控input的聚焦，input聚焦时，出发这个focus函数，这个函数就去改变status这个值，但是你image绑定了status这个值，所以当status改变了，image跟这个值有关的属性就跟着变化了