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


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 相关文章推荐
jquery 仿QQ校友的DIV模拟窗口效果源码
Mar 24 Javascript
javascript禁用Tab键脚本实例
Nov 22 Javascript
实践中学习AngularJS表单
Mar 21 Javascript
jquery按回车键实现表单提交的简单实例
May 25 Javascript
Bootstrap的fileinput插件实现多文件上传的方法
Sep 05 Javascript
微信小程序 实战程序简易新闻的制作
Jan 09 Javascript
浅谈React Event实现原理
Sep 20 Javascript
Vue infinite update loop的问题解决
Apr 23 Javascript
vue项目中使用fetch的实现方法
Apr 25 Javascript
vue或react项目生产环境去掉console.log的操作
Sep 02 Javascript
vue 项目引入echarts 添加点击事件操作
Sep 09 Javascript
vue前端工程的搭建
Mar 31 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中删除数组的第一个元素和最后一个元素的函数
2015/03/07 PHP
分享PHP守护进程类
2015/12/30 PHP
PHP实现的简单AES加密解密算法实例
2017/05/29 PHP
thinkPHP框架实现的无限回复评论功能示例
2018/06/09 PHP
PHP获取星期几的常用方法小结
2018/12/18 PHP
Thinkphp5.0框架视图view的模板布局用法分析
2019/10/12 PHP
Jquery 组合form元素为json格式,asp.net反序列化
2009/07/09 Javascript
javascript 函数调用的对象和方法
2010/07/01 Javascript
setTimeout和setInterval的区别你真的了解吗?
2011/03/31 Javascript
JavaScript的setAttribute兼容性问题解决方法
2013/11/11 Javascript
javascript创建createXmlHttpRequest对象示例代码
2014/02/10 Javascript
Windows下用PyCharm和Visual Studio开始Python编程
2015/10/26 Javascript
bootstrap中使用google prettify让代码高亮的方法
2016/10/21 Javascript
axios中cookie跨域及相关配置示例详解
2017/12/20 Javascript
关于js对textarea换行符的处理方法浅析
2018/08/03 Javascript
微信小程序 MinUI组件库系列之badge徽章组件示例
2018/08/20 Javascript
微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码
2018/11/09 Javascript
微信小程序 高德地图路线规划实现过程详解
2019/08/05 Javascript
对Layer弹窗使用及返回数据接收的实例详解
2019/09/26 Javascript
vue的$http的get请求要加上params操作
2020/11/12 Javascript
分享python数据统计的一些小技巧
2016/07/21 Python
selenium+python设置爬虫代理IP的方法
2018/11/29 Python
python调用staf自动化框架的方法
2018/12/26 Python
python中如何使用分步式进程计算详解
2019/03/22 Python
python实现串口通信的示例代码
2020/02/10 Python
python中的时区问题
2021/01/14 Python
用python监控服务器的cpu,磁盘空间,内存,超过邮件报警
2021/01/29 Python
AmazeUI底部导航栏与分享按钮的示例代码
2020/08/18 HTML / CSS
澳大利亚手袋、珠宝和在线时尚精品店:The Way
2019/12/21 全球购物
Fox Racing英国官网:越野摩托车和山地自行车服装
2020/02/26 全球购物
中国梦的演讲稿
2014/01/08 职场文书
关于人生的感言
2014/01/17 职场文书
全国法制宣传日活动总结2014
2014/11/01 职场文书
2016年班主任培训心得体会
2016/01/07 职场文书
英文诗歌翻译方法(赏析)
2019/08/16 职场文书
Java并发编程之原子性-Atomic的使用
2022/03/16 Java/Android