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

 更新时间: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;
}

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

相关文章

  • JS匿名函数类生成方式实例分析

    JS匿名函数类生成方式实例分析

    这篇文章主要介绍了JS匿名函数类生成方式,结合实例形式分析了javascript匿名函数类相关属性与方法定义与使用技巧,需要的朋友可以参考下
    2016-11-11
  • 微信小程序canvas拖拽、截图组件功能

    微信小程序canvas拖拽、截图组件功能

    这篇文章主要介绍了微信小程序canvas拖拽、截图组件功能,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-09-09
  • Bootstrap fileinput文件上传预览插件使用详解

    Bootstrap fileinput文件上传预览插件使用详解

    这篇文章主要为大家详细介绍了Bootstrap fileinput文件上传预览插件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • 用原生JS获取CLASS对象(很简单实用)

    用原生JS获取CLASS对象(很简单实用)

    这篇文章主要介绍了如何用原生JS获取CLASS对象,看过dom编程艺术的朋友或许会知道的
    2014-10-10
  • JS利用中介模式开发全局控制器

    JS利用中介模式开发全局控制器

    这篇文章主要为大家介绍了JS利用中介模式开发全局控制器图文示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-09-09
  • 小程序自定义弹框效果

    小程序自定义弹框效果

    这篇文章主要为大家详细介绍了小程序自定义弹框效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-11-11
  • 利用uni-app和uView实现多图上传功能全过程

    利用uni-app和uView实现多图上传功能全过程

    最近在使用uniapp开发的微信小程序中使用了图片上传功能,下面这篇文章主要给大家介绍了关于利用uni-app和uView实现多图上传功能的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-03-03
  • JavaScript学习笔记之惰性函数示例详解

    JavaScript学习笔记之惰性函数示例详解

    函数是js世界的一等公民,js的动态性、易变性在函数的应用上,体现的淋漓尽致。下面这篇文章主要给大家介绍了关于JavaScript学习笔记之惰性函数的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下。
    2017-08-08
  • JS实现自动阅读单词(有道单词本添加功能)

    JS实现自动阅读单词(有道单词本添加功能)

    有道单词客户Duan没有自动阅读的功能, 本文用强大的js实现了简单的自动下一个单词的功能,需要的朋友可以参考下
    2016-11-11
  • javascript实现html页面之间参数传递的四种方法实例分析

    javascript实现html页面之间参数传递的四种方法实例分析

    这篇文章主要介绍了javascript实现html页面之间参数传递的四种方法,结合实例形式较为详细的分析了JavaScript实现页面之间参数传递的常用技巧,需要的朋友可以参考下
    2015-12-12

最新评论