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


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 相关文章推荐
js异或加解密效果代码
Jun 25 Javascript
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
Jan 15 Javascript
对象题目的一个坑 理解Javascript对象
Dec 22 Javascript
BootStrap+Angularjs+NgDialog实现模式对话框
Aug 24 Javascript
bootstrap fileinput完整实例分享
Nov 08 Javascript
JS绘制微信小程序画布时钟
Dec 24 Javascript
Node.js使用Express创建Web项目详细教程
Mar 31 Javascript
浅谈js的解析顺序 作用域 严格模式
Oct 23 Javascript
React中使用外部样式的3种方式(小结)
May 28 Javascript
vue 父组件中调用子组件函数的方法
Jun 06 Javascript
小程序实现层叠卡片滑动效果
Aug 26 Javascript
使用webpack/gulp构建TypeScript项目的方法示例
Dec 18 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 变量未定义等错误的解决方法
2011/01/12 PHP
dojo 之基础篇(三)之向服务器发送数据
2007/03/24 Javascript
JavaScript 三种创建对象的方法
2009/10/16 Javascript
扩展js对象数组的OrderByAsc和OrderByDesc方法实现思路
2013/05/17 Javascript
js监听鼠标事件控制textarea输入字符串的个数
2014/09/29 Javascript
D3.js 从P元素的创建开始(显示可加载数据)
2014/10/30 Javascript
jQuery动态添加及删除表单上传元素的方法(附demo源码下载)
2016/01/15 Javascript
js智能获取浏览器版本UA信息的方法
2016/08/08 Javascript
jquery append与appendTo方法比较
2017/05/24 jQuery
详解Node中导入模块require和import的区别
2017/08/11 Javascript
打造通用的匀速运动框架(实例讲解)
2017/10/17 Javascript
微信小程序实现左滑修改、删除功能
2020/10/19 Javascript
JavaScript页面倒计时功能完整示例
2019/05/15 Javascript
Layer组件多个iframe弹出层打开与关闭及参数传递的方法
2019/09/25 Javascript
Vue 3.0 全家桶抢先体验
2020/04/28 Javascript
详解JS深拷贝与浅拷贝
2020/08/04 Javascript
jQuery实现回到顶部效果
2020/10/19 jQuery
在Vue中使用mockjs代码实例
2020/11/25 Vue.js
python调用java的Webservice示例
2014/03/10 Python
Python实现的下载网页源码功能示例
2017/06/13 Python
Django使用Jinja2模板引擎的示例代码
2019/08/09 Python
python3使用GUI统计代码量
2019/09/18 Python
python画环形图的方法
2020/03/25 Python
印度婴儿用品在线商店:Firstcry.com
2016/12/05 全球购物
世界最大的票务市场:viagogo
2017/02/16 全球购物
中国跨境在线时尚零售商:Bellelily
2018/04/06 全球购物
荷兰演唱会和体育比赛订票网站:viagogo荷兰
2018/04/08 全球购物
美国保健品专家:Life Extension
2018/05/04 全球购物
纽约市的奢华内衣目的地:Anya Lust
2019/08/02 全球购物
C语言怎样定义和声明全局变量和函数最好
2013/11/26 面试题
总裁助理岗位职责
2014/02/17 职场文书
合作意向书范本
2014/03/31 职场文书
幼儿园端午节活动总结
2015/05/05 职场文书
如何做好工作总结!
2019/04/10 职场文书
Android Studio 计算器开发
2022/05/20 Java/Android
django项目、vue项目部署云服务器的详细过程
2022/07/23 Servers