微信小程序将页面按钮悬浮固定在底部的实现代码


Posted in Javascript onOctober 29, 2020

效果图如下所示:

微信小程序将页面按钮悬浮固定在底部的实现代码

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

到此这篇关于微信小程序将页面按钮悬浮固定在底部的实现代码的文章就介绍到这了,更多相关小程序按钮固定在底部内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
juqery 学习之六 CSS--css、位置、宽高
Feb 11 Javascript
基于jquery的固定表头和列头的代码
May 03 Javascript
js将iframe中控件的值传到主页面控件中的实现方法
Mar 11 Javascript
JS取request值以及自动执行使用示例
Feb 24 Javascript
jquery检测input checked 控件是否被选中的方法
Mar 26 Javascript
深入理解JavaScript系列(44):设计模式之桥接模式详解
Mar 04 Javascript
js 动态给元素添加、移除事件的实现方法
Jul 19 Javascript
jQuery实现动态加载select下拉列表项功能示例
May 31 jQuery
vue如何安装使用Quill富文本编辑器
Sep 21 Javascript
vue的$http的get请求要加上params操作
Nov 12 Javascript
浅析VUE防抖与节流
Nov 24 Vue.js
vue从后台渲染文章列表以及根据id跳转文章详情详解
Dec 14 Vue.js
vue3.0搭配.net core实现文件上传组件
Oct 29 #Javascript
使用jQuery实现购物车
Oct 29 #jQuery
ant design中upload组件上传大文件,显示进度条进度的实例
Oct 29 #Javascript
react使用antd表单赋值,用于修改弹框的操作
Oct 29 #Javascript
node.js爬虫框架node-crawler初体验
Oct 29 #Javascript
JavaScript实现网页计算器功能
Oct 29 #Javascript
Javascript数组及类数组相关原理详解
Oct 29 #Javascript
You might like
php设计模式 Delegation(委托模式)
2011/06/26 PHP
PHP fopen 读取带中文URL地址的一点见解
2012/09/25 PHP
ThinkPHP添加更新标签的方法
2014/12/05 PHP
php输出指定时间以前时间格式的方法
2015/03/21 PHP
PHP使用mysql与mysqli连接Mysql数据库用法示例
2016/07/07 PHP
JObj预览一个JS的框架
2008/03/13 Javascript
js 实现 input type=&quot;file&quot; 文件上传示例代码
2013/08/07 Javascript
jQuery 获取多选框的值及多选框中文的函数
2016/05/16 Javascript
jQuery文件上传控件 Uploadify 详解
2016/06/20 Javascript
深入理解vuex2.0 之 modules
2017/11/20 Javascript
基于node打包可执行文件工具_Pkg使用心得分享
2018/01/24 Javascript
Vue中对比scoped css和css module的区别
2018/05/17 Javascript
小程序实现多列选择器
2019/02/15 Javascript
JS操作json对象key、value的常用方法分析
2019/10/29 Javascript
vue 实现LED数字时钟效果(开箱即用)
2019/12/08 Javascript
js实现从右往左匀速显示图片(无缝轮播)
2020/06/29 Javascript
vue-router 控制路由权限的实现
2020/09/24 Javascript
[56:45]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第一局
2016/02/28 DOTA
九步学会Python装饰器
2015/05/09 Python
NetworkX之Prim算法(实例讲解)
2017/12/22 Python
Python编程求解二叉树中和为某一值的路径代码示例
2018/01/04 Python
基于Django用户认证系统详解
2018/02/21 Python
基于OpenCV python3实现证件照换背景的方法
2019/03/22 Python
python把ipynb文件转换成pdf文件过程详解
2019/07/09 Python
python自动从arxiv下载paper的示例代码
2020/12/05 Python
美国女性运动零售品牌:Lady Foot Locker
2017/05/12 全球购物
德国的大型美妆个护电商:Flaconi
2020/06/26 全球购物
婚礼证婚人证婚词
2014/01/13 职场文书
人力资源主管岗位职责
2014/01/29 职场文书
关于保护环境的建议书
2014/08/26 职场文书
关于读书的演讲稿300字
2014/08/27 职场文书
2019初中学生入团申请书
2019/06/27 职场文书
如何做好员工培训计划?
2019/07/09 职场文书
pytorch 实现多个Dataloader同时训练
2021/05/29 Python
Golang中异常处理机制详解
2021/06/08 Golang
React四级菜单的实现
2022/04/08 Javascript