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


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 相关文章推荐
在 IE 中调用 javascript 打开 Excel 表
Dec 21 Javascript
Prototype 工具函数 学习
Jul 23 Javascript
Javascript 键盘keyCode键码值表
Dec 24 Javascript
jquery实现的鼠标拖动排序Li或Table
May 04 Javascript
AngularJS入门教程(二):AngularJS模板
Dec 06 Javascript
使用PHP+JavaScript将HTML页面转换为图片的实例分享
Apr 18 Javascript
AngularJS框架的ng-app指令与自动加载实现方法分析
Jan 04 Javascript
JS jQuery使用正则表达式去空字符的简单实现代码
May 20 jQuery
使用clipboard.js实现复制功能的示例代码
Oct 16 Javascript
详解mpvue中使用vant时需要注意的onChange事件的坑
May 16 Javascript
使用typescript构建Vue应用的实现
Aug 26 Javascript
vue输入节流,避免实时请求接口的实例代码
Oct 30 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
php url地址栏传中文乱码解决方法集合
2010/06/25 PHP
浅谈php冒泡排序
2014/12/30 PHP
PHP PDO fetch 模式各种参数的输出结果一览
2015/01/07 PHP
PHP自定义错误用法示例
2016/09/28 PHP
客户端脚本中常常出现的一些问题和调试技巧
2007/01/09 Javascript
对YUI扩展的Gird组件 Part-2
2007/03/10 Javascript
JQuery 选项卡效果(JS与HTML的分离)
2010/04/01 Javascript
Jquery中对数组的操作代码
2011/08/12 Javascript
yepnope.js 异步加载资源文件
2011/09/08 Javascript
ToolTips JQEURY插件之简洁小提示框效果
2011/11/19 Javascript
JS定时关闭窗口的实例
2013/05/22 Javascript
jquery sortable的拖动方法示例详解
2014/01/16 Javascript
Jquery创建层显示标题和内容且随鼠标移动而移动
2014/01/26 Javascript
Jquery实现点击按钮,连续地向textarea中添加值的实例代码
2014/03/08 Javascript
javascript实现类似超链接的效果
2014/12/26 Javascript
web前端开发JQuery常用实例代码片段(50个)
2015/08/28 Javascript
BootStrap中Tab页签切换实例代码
2016/05/30 Javascript
同步文本框内容JS代码实现
2016/08/04 Javascript
整理关于Bootstrap表单的慕课笔记
2017/03/29 Javascript
JavaScript实现的拼图算法分析
2019/02/13 Javascript
vue弹出框组件封装实例代码
2019/10/31 Javascript
jQuery HTML获取内容和属性操作实例分析
2020/05/20 jQuery
python判断给定的字符串是否是有效日期的方法
2015/05/13 Python
怎样使用Python脚本日志功能
2016/08/14 Python
Python自动发邮件脚本
2017/03/31 Python
python的Crypto模块实现AES加密实例代码
2018/01/22 Python
python pycurl验证basic和digest认证的方法
2018/05/02 Python
Django model update的多种用法介绍
2020/03/28 Python
Python3从零开始搭建一个语音对话机器人的实现
2019/08/23 Python
余弦相似性计算及python代码实现过程解析
2019/09/18 Python
python应用Axes3D绘图(批量梯度下降算法)
2020/03/25 Python
使用canvas一步步实现图片打码功能的方法
2019/06/17 HTML / CSS
大学校园活动策划书
2014/02/04 职场文书
致标枪运动员加油稿
2014/02/15 职场文书
党的群众路线教育实践活动心得体会900字
2014/03/07 职场文书
工作计划范文之财务管理
2019/08/09 职场文书