效果图如下所示:
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;}