欢迎来到代码驿站!

JavaScript代码

当前位置:首页 > 网页前端 > JavaScript代码

操作按钮悬浮固定在微信小程序底部的实现代码

时间:2021-06-17 09:18:57|栏目:JavaScript代码|点击:

本章节主要介绍了如何将操作按钮悬浮固定在微信小程序底部?操作起来也比较简单,还不会的朋友一起跟着小编学习一下吧,希望对你们有所帮助。

  常见的有加入购物车按钮、结算按钮、收货列表添加地址按钮。

  以收货地址为例,将添加地址按钮悬浮于最底部,这样再多的地址,也不会被遮挡而看不见。

如何将操作按钮悬浮固定在微信小程序底部?

  核心代码如下:

  添加 

/*添加地址按钮*/
  .address-add {
  position: fixed;
  bottom: 0;
  width: 100%;
  }

  改用position: fixed之后,其中width需要设置为100%,不然会是一个很窄的按钮。

如何将操作按钮悬浮固定在微信小程序底部?

  考虑到按钮自身占据46px高度,因此地址列表还需要加上如下样式 

/
  /*地址列表包装容器*/
  .address-list {
  margin-bottom: 46px;
  }

  这样一来最后一个地址点通网络的设为默认,编辑,修改按钮可以完整显示出现了。

如何将操作按钮悬浮固定在微信小程序底部?

总结

上一篇:Layui数据表格判断编辑输入的值,是否为我需要的类型详解

栏    目:JavaScript代码

下一篇:使用JavaScript保存文本文件到本地的两种方法

本文标题:操作按钮悬浮固定在微信小程序底部的实现代码

本文地址:http://www.codeinn.net/misctech/143545.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有