介绍
这期内容当中小编将会给大家带来有关微信小程序实现将页面按钮悬浮固定在底部,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。
效果图如下所示:
,,ps:悬浮固定在页面的底部,并且背景有白色层将页面底部文字的显示遮罩,一面影响显示观感。且不受页面下拉上提的影响。
wxml代码如下:
& lt; !——底部按钮的背景层——比;
& lt;视图类=癰aise"祝辞& lt;/view>
& lt; !——底部按钮——比;
& lt;视图类=癮nniu"祝辞
& lt;按钮formType=皊ubmit"类=癰tn-normal btbdstk"bindtap=皉esetSalaryBtnClick"比;
& lt;视图类=癰dstk"比;
& lt;文本在重置条件& lt;/text>
& lt;/view>
& lt;/button>
& lt;按钮formType=皊ubmit"禁用=皗{禁用}},类=癰tn-normal btbdstk"比;
& lt;视图类=皊qdzk"祝辞
& lt; text>确认查询& lt;/text>
& lt;/view>
& lt;/button>
& lt;/view> wxs样式如下:
/*底部按钮*/.baise {
背景:# FFFFFF;
显示:flex;
位置:固定;
宽度:100%;
身高:150 rpx;
z - index: 665;
底部:0 rpx;
}
.anniu {
显示:flex;
位置:固定;
宽度:95%;
z - index: 666;
底部:55 rpx;
}
.btbdstk {
margin-left: 30 rpx;
宽度:50%;
}
.bdstk {
字体大小:30 rpx;
颜色:# ffffff;
宽度:100%;
边界:2 rpx固体# ffffff;
border - radius: 15 rpx;
背景:# 78 b8fd;
身高:95 rpx;
text-align:中心;
行高:95 rpx;
}
.sqdzk {
字体大小:30 rpx;
颜色:# ffffff;
宽度:100%;
边界:2 rpx固体# ffffff;
border - radius: 15 rpx;
背景:# FF7178;
身高:95 rpx;
text-align:中心;
行高:95 rpx;
} 上述就是小编为大家分享的微信小程序实现将页面按钮悬浮固定在底部了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注行业资讯频道。
