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


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 相关文章推荐
JAVASCRIPT IE 与 FF中兼容问题小结
Feb 18 Javascript
javascript获取网页中指定节点的父节点、子节点的方法小结
Apr 24 Javascript
一个不错的js html页面倒计时可精确到秒
Oct 22 Javascript
jquery中添加属性和删除属性
Jun 03 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
Jun 17 Javascript
原生js实现tab选项卡切换
Mar 23 Javascript
JS中substring与substr的用法
Nov 16 Javascript
微信小程序 Tab页切换更新数据
Jan 05 Javascript
原生JS实现幻灯片
Feb 22 Javascript
bootstrap日期控件问题(双日期、清空等问题解决)
Apr 19 Javascript
详解Node.js项目APM监控之New Relic
May 12 Javascript
详解Vue中组件传值的多重实现方式
Aug 16 Javascript
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
新的一年,新的期待:DC在2020年的四部动画电影
2020/01/01 欧美动漫
php数组函数序列之array_key_exists() - 查找数组键名是否存在
2011/10/29 PHP
PHP反转字符串函数strrev()函数的用法
2012/02/04 PHP
『PHP』PHP截断函数mb_substr()使用介绍
2013/04/22 PHP
php修改指定文件后缀的方法
2014/09/11 PHP
分享PHP源码批量抓取远程网页图片并保存到本地的实现方法
2015/12/01 PHP
php自动提交表单的方法(基于fsockopen与curl)
2016/05/09 PHP
Thinkphp5框架异常处理操作实例分析
2020/06/03 PHP
JavaScript 继承详解(一)
2009/07/13 Javascript
javascript 正则替换 replace(regExp, function)用法
2010/05/22 Javascript
jquery文字上下滚动的实现方法
2013/03/22 Javascript
JavaScript弹窗基础篇
2016/04/27 Javascript
将List对象列表转换成JSON格式的类实现方法
2016/07/04 Javascript
JS中script标签defer和async属性的区别详解
2016/08/12 Javascript
js的OOP继承实现(必看篇)
2017/02/18 Javascript
jQuery插件echarts去掉垂直网格线用法示例
2017/03/03 Javascript
React-Native中禁用Navigator手势返回的示例代码
2017/09/09 Javascript
webpack4 处理CSS的方法示例
2018/09/03 Javascript
Vue下拉框回显并默认选中随机问题
2018/09/06 Javascript
js和jquery判断数据类型的4种方法总结
2020/08/28 jQuery
vue3.0实现点击切换验证码(组件)及校验
2020/11/18 Vue.js
Vue仿Bibibili首页的问题
2021/01/21 Vue.js
Python基于正则表达式实现检查文件内容的方法【文件检索】
2017/08/30 Python
解决Python二维数组赋值问题
2019/11/28 Python
Python 实现自动完成A4标签排版打印功能
2020/04/09 Python
python连接mysql数据库并读取数据的实现
2020/09/25 Python
Python环境配置实现pip加速过程解析
2020/11/27 Python
人力资源专员自我评价怎么写
2013/09/19 职场文书
党的群众路线教育实践活动心得体会900字
2014/03/07 职场文书
眼镜促销方案
2014/03/15 职场文书
学校出纳员岗位职责
2014/03/18 职场文书
创先争优活动党员公开承诺书
2014/08/29 职场文书
单位接收函格式
2015/01/30 职场文书
2015年先进个人自荐书
2015/03/24 职场文书
小学见习报告
2015/06/23 职场文书
MySQL安装后默认自带数据库的作用详解
2021/04/27 MySQL