小程式開發筆記（二）–蘋果手機的懸浮按鈕居中問題

記錄小程式開發過程中遇到的那些問題

先看效果圖

頁面很簡單，上面兩個輸入框，下方一個按鈕，輸入框分別是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;
}

不明故里，未能好好學習，先在此記錄一下