input组件使用bindfocus&bindblur另类添加遮罩效果

既然并不像普通网页用js可以解决遮罩层效果，官方的api太不明显，所以还是写个小demo造福大家。

以下是效果图

首先写view

<!--index.wxml-->
<view class="container">
  <view>
    <view class="search-container">
      <input class="search-bar" type="text" 
                  bindfocus="focusInputEvent" 
                  bindblur="blurInputEvent" placeholder="搜索"></input>
      <icon type="search" size="20" />
    </view>
  </view>
  <view class="bg" style="filter:blur({{view.Filter}}px);opacity:{{view.Opacity}}">What’s in a name? That which we call a rose by any other word would smell as sweet.</view>
</view>

wxss 样式

/**index.wxss**/
.search-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  color: #fff;
  height: 80rpx;
  padding: 10rpx 20rpx;
  z-index: 100;
  border-bottom: 1px solid #d9d9d9;
}
.search-container input {
  background: #fff;
  color: black;
  padding: 5px 10rpx;
  height: 40rpx;
  width: 100%;
  border-radius: 8rpx;
}
.search-container icon {
  position: absolute;
  z-index: 10;
  top: 50%;
  margin-top: -20rpx;
  right: 40rpx;
}
.bg{
  margin: 1%;
  background: #d3d3d3;
  height: 500rpx;
  width: 100%;
  text-align: center;
  font-size: 50rpx;
  color: white;
}

然后在js中注册函数

//index.js
//获取应用实例
var app = getApp()
Page({
  data: {
    view: {
      Opacity: 1,
      Filter: 0
    }
  },
  focusInputEvent: function () {
    this.setData({
      view: {
        Opacity: 0.7,
        Filter: 1
      }
    })
  },
  blurInputEvent: function () {
    this.setData({
      view: {
        Opacity: 1,
        Filter: 0
      }
    })
  }
})

搞定

源码下载：https://github.com/SageZhang/wxblur