微信小程序将页面按钮悬浮固定在底部的实现代码
更新时间:2020年10月29日 16:04:13 作者:怎奈你何
这篇文章主要介绍了微信小程序将页面按钮悬浮固定在底部的实现代码,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
效果图如下所示:
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; }
到此这篇关于微信小程序将页面按钮悬浮固定在底部的实现代码的文章就介绍到这了,更多相关小程序按钮固定在底部内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
Bootstrap fileinput文件上传预览插件使用详解
这篇文章主要为大家详细介绍了Bootstrap fileinput文件上传预览插件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2017-05-05javascript实现html页面之间参数传递的四种方法实例分析
这篇文章主要介绍了javascript实现html页面之间参数传递的四种方法,结合实例形式较为详细的分析了JavaScript实现页面之间参数传递的常用技巧,需要的朋友可以参考下2015-12-12
最新评论