效果圖如下所示：

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;
}

到此這篇關於微信小程式將頁面按鈕懸浮固定在底部的實現程式碼的文章就介紹到這了,更多相關小程式按鈕固定在底部內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！