【微信小程序开发笔记】--苹果手机的悬浮按钮居中问题

news/2024/12/1 9:58:03/

小程序开发笔记（二）–苹果手机的悬浮按钮居中问题

记录小程序开发过程中遇到的那些问题

先看效果图

页面效果图

页面很简单，上面两个输入框，下方一个按钮，输入框分别是textarea和input，按钮在这里我做成悬浮状态（演示用，实际并不需要悬浮）。

页面代码：

<view class="container"><view class="textarea-wrp"><view class='new'><text class='newtext'>新增设备：</text><textarea class='newtextarea' placeholder-style="color:#b2b2b2" placeholder="请输入设备名称" bindblur="bindKeyInputCompany" auto-height/></view><view class="page-head-line"></view><view class='new'><text class='newtext'>采集地址：</text><block wx:if="{{isChoose === true}}"><input class='newtextinput' bindtap='chooseLocation' value='{{address}}' /></block><block wx:if="{{isChoose === false}}"><input class='newtextinput' placeholder-style="color:#b2b2b2" placeholder="请选择地址" bindtap='chooseLocation' /></block><image class='locationimg' mode='aspectFit' style="width: 48rpx; height:48rpx; background-color: #fff;" src="{{src}}" bindtap='chooseLocation'></image></view></view><button class="savebtn" bindtap="test" confirm-type="done">保存到本地</button>
</view>

主要记录下悬浮按钮的坑，我在wxss文件中这样设置了按钮样式

.savebtn {color: #fff;background-color: #22c2cc; font-size: 30rpx;position: fixed;/*固定*/bottom: 0rpx;margin-bottom: 120rpx;/*靠底部*/float: right;width: 500rpx;
}

运行模拟器上很正常，安卓手机上也很正常，但是运行小程序到苹果手机上时就出了问题了，发现悬浮按钮靠左边显示了而不是水平居中，没有了解过css编程的我看着真是头大，在搜索、尝试变换布局样式的时候发现，可能是position: fixed;/*固定*/这个属性在苹果手机中不兼容导致，于是针对这个问题寻找解决办法，有人提示加上一句 margin:0 auto;

.savebtn {margin:0 auto; /*在苹果手机上显示居中*/color: #fff;background-color: #22c2cc; font-size: 30rpx;position: fixed;bottom: 0rpx;margin-bottom: 120rpx;float: right;width: 500rpx;
}

但是光是加上 margin:0 auto;仍不行，后来发现再加上两个属性即可

.savebtn {left: 0;right: 0;margin:0 auto;  color: #fff;background-color: #22c2cc; font-size: 30rpx;position: fixed;bottom: 0rpx;margin-bottom: 120rpx;float: right;width: 500rpx;
}