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

 更新时间:2020年10月29日 16:04:13   作者:怎奈你何  
这篇文章主要介绍了微信小程序将页面按钮悬浮固定在底部的实现代码,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

效果图如下所示:

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

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

相关文章

  • 微信小程序实现漂亮的弹窗效果

    微信小程序实现漂亮的弹窗效果

    这篇文章主要为大家详细介绍了微信小程序实现漂亮的弹窗效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-07-07
  • 解决js ajax同步请求造成浏览器假死的问题

    解决js ajax同步请求造成浏览器假死的问题

    下面小编就为大家分享一篇解决js ajax同步请求造成浏览器假死的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-01-01
  • 利用javascript实现禁用网页上所有文本框,下拉菜单,多行文本域

    利用javascript实现禁用网页上所有文本框,下拉菜单,多行文本域

    这篇文章主要介绍了利用javascript实现禁用网页上所有文本框,下拉菜单,多行文本域。需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • JavaScript动画实例之粒子文本的实现方法详解

    JavaScript动画实例之粒子文本的实现方法详解

    这篇文章主要介绍了JavaScript动画实例之粒子文本的实现方法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • Javascript模板技术

    Javascript模板技术

    Javascript模板技术...
    2007-04-04
  • JavaScript模块化原理深入分析

    JavaScript模块化原理深入分析

    JavaScript中的模块化是指将每个js文件会被认为单独一个的模块。模块之间是互相不可见的。如果一个模块需要使用另一个模块,那么需要通过指定语法来引入要使用的模块,而且只能使用引入模块所暴露的内容
    2022-11-11
  • 基于微前端qiankun的多页签缓存方案实践

    基于微前端qiankun的多页签缓存方案实践

    这篇文章主要介绍了基于微前端qiankun的多页签缓存方案实践,本文对qiankun框架的使用没有做太多的发散总结,官网和Github上已经有很多相关问题的总结和踩坑经验可供参考,需要的朋友可以参考下
    2022-08-08
  • 微信小程序计算器实例详解

    微信小程序计算器实例详解

    这篇文章主要为大家详细介绍了微信小程序计算器实例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-07-07
  • JavaScript阻止表单提交方法(附代码)

    JavaScript阻止表单提交方法(附代码)

    这篇文章主要介绍了JavaScript阻止表单提交方法,通过代码示例讲解了阻止表单提交需要注意的事项,以及onSubmit和check()的区别写法,需要的朋友可以参考下
    2017-08-08
  • JavaScript 中创建私有成员

    JavaScript 中创建私有成员

    这篇文章主要介绍了JavaScript 中创建私有成员,下面介绍以 # 作为前缀几种在 JavaScript 代码中实现私有属性和方法的方式,需要的小伙伴可以参考一下
    2021-12-12

最新评论