效果圖如下所示：

?? 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>確認(rèn)查詢</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; }

?

總結(jié)

以上是生活随笔為你收集整理的微信小程序将页面按钮悬浮固定在底部的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。