您当前的位置: 首页 > 知识百科 > 微信小程序悬浮按钮如何固定在微信小程序底部?

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

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

  微信小程序悬浮按钮如何固定在微信小程序底部?在开发微信小程序的时候,可能会用到微信小程序悬浮按钮,如何把悬浮按钮固定在微信小程序底部呢?接下来小编来您怎么去操作哦。

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

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

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

  

  微信小程序悬浮按钮何固定在微信小程序底部核心微信小程序代码如下:

  添加

  /*添加地址按钮*/

  .address-add {

  position: fixed;

  bottom: 0;

  width: 100%;

  }

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

  

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

  /

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

  .address-list {

  margin-bottom: 46px;

  }

  复制代码

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

  

  微信小程序按钮固定在微信小程序底部有什么用?

  微信小程序开发者可以在自己的微信小程序页面的底部上设置小程序悬浮按钮,这样微信用户把页面翻到底部以后,就会看到该按钮了,然后可以顺势的点击该小程序按钮进入到另外一个界面。

如果该微信小程序悬浮按钮是转发按钮的更好哦。微信用户就可以把该微信小程序分享给自己的微信好友了。这样体验起来更加的流畅哦。

  微信小程序悬浮按钮如何固定在微信小程序底部?以上就是具体的方法和微信小程序代码了哦,大家看完以上内容后都学会了吗?感谢各位亲们的耐心观看哦,大家请多多的关注微小乔哦。

  怎么修改微信小程序按钮格式

  小程序按钮点击样式功能介绍

  小程序转发按钮有什么功能?