• 简书网微信公众号二维码
您当前的位置: 首页 > 知识百科 > 将操作按钮漂浮固定在微信小程序底部怎么做?

将操作按钮漂浮固定在微信小程序底部怎么做?

时间:2023-07-01 14:05 阅读数:45 人阅读 分类:知识百科

  将操作按钮漂浮固定在微信小程序底部怎么做?许多小伙伴在问我,怎样才能把将操作按钮漂浮固定在微信小程序底部呢。小编整理了一些知识,下面就来为大家讲解一下。

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

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

  

  核心代码如下:

  添加

  /*添加地址按钮*/

  .address-add {

  position: fixed;

  bottom: 0;

  width: 100%;

  }

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

  

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

  /

  /*地址列表包装容器*/

  .address-list {

  margin-bottom: 46px;

  }

  复制代码

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

  

  以上就是小编为大家整理的关于将操作按钮漂浮固定在微信小程序底部怎么做的内容。更多更精彩的内容请持续关注微信素材网。

  相关阅读:

        微信小程序登录页的漂浮效果是怎么做的?

        小程序名片盒页面详情源代码

        微信小程序设计规范有哪些呢?