1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > 微信小程序将页面按钮悬浮固定在底部

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

时间:2022-04-21 05:30:30

相关推荐

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

效果图如下所示:

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。