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

发布：2018-01-25 09:42浏览：次来源：网络作者：tianshu

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

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

微信小程序操作按钮悬浮固定在底部(图1)

核心代码如下：

<font size="3"><button bindtap="add" type="primary" class="address-add">添加</button>
/*添加地址按钮*/
.address-add {
position: fixed;
bottom: 0;
width: 100%;
}</font>

复制代码

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

微信小程序操作按钮悬浮固定在底部(图2)

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

复制代码

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

微信小程序操作按钮悬浮固定在底部(图3)

源码下载：https://git.oschina.net/dotton/lendoo-wx

免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。