微信小程序将页面按钮悬浮固定在底部

效果图如下所示：

   ps: 悬浮固定在页面的底部，并且背景有白色层将页面底部文字的显示遮罩，一面影响显示观感。且不受页面下拉上提的影响。

wxml代码如下：

  <!--底部按钮的背景层-->
  <view class="baise"></view>
  <!--底部按钮-->
  <view class="anniu">
    <button formType="submit" class="btn-normal btbdstk" bindtap="resetSalaryBtnClick" >
      <view class="bdstk" >
        <text >重置条件</text> 
      </view>
    </button>
    <button formType="submit" disabled="{{disabled}}" class="btn-normal btbdstk" >
      <view class="sqdzk">
        <text>确认查询</text>
      </view>
    </button>
   </view>

 

wxss样式如下：

/* 底部按钮 */
.baise{
    background:#FFFFFF;
    display:flex;
    position:fixed; 
    width:100%;
    height:150rpx;
    z-index:665;
    bottom:0rpx;
}
.anniu{
  display:flex;
  position:fixed; 
  width:95%;
  z-index:666;
  bottom:55rpx;
}
.btbdstk{
  margin-left:30rpx;
  width:50%;
}
.bdstk{
  font-size:30rpx;
  color:#ffffff;
  width:100%;
  border:2rpx solid #ffffff;
  border-radius:15rpx;
  background:#78B8FD;
  height: 95rpx;
  text-align: center;
  line-height:95rpx;
}
.sqdzk{
  font-size:30rpx;
  color:#ffffff;
  width:100%;
  border:2rpx solid #ffffff;
  border-radius:15rpx;
  background:#FF7178;
  height: 95rpx;
  text-align: center;
  line-height:95rpx;
}