小程序样式的问题

在做按钮的时候，通常需要按钮悬浮在底部并垂直居中，这时可以设置一个父盒子包住，设置display:flex，position:fixed和justify-content: center，这样按钮就居中了

<view class="bt-c">
  <view class="bt" bindtap="gotonewservice">添加服务</view>
</view>

.bt {
  width: 80%;
  height: 80rpx;
  color: #fff;
  font-size: 26rpx;
  line-height: 80rpx;
  background: #f26d1d;
  border-radius: 10rpx;
  text-align: center;
  border: 1px solid #f26d1d;
}

.bt-c {
  width: 100%;
  bottom: 0;
  position: fixed;
  height: 120rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

还有一个问题，当页面内容过多下滑时，溢出的内容会覆盖在按钮上，这时我们可以用scroll-view标签包住页面，在onLoad方法中减去按钮的高度，从而控制内容的高度
注意：按钮要写在scroll-view外面

<scroll-view scroll-y="true" class="container" style="height:{{scrollHeight}}px">...</scroll-view>

微信小程序使用的rpx需要转为px，在app.js中定义rpx转px的方法

    wx.getSystemInfo({
      success: function(res) {
        let pxlv = 750 / res.windowWidth;
        d.setCache("pxlv", pxlv);
      }
    });

减去按钮的高度

const t = getApp();

  onLoad: function(options) {
    let pxlv = t.getCache("pxlv");
    console.log(120 /pxlv);
    let scrollHeight = wx.getSystemInfoSync().windowHeight - 1 - 120 / pxlv;
    this.setData({
      scrollHeight: scrollHeight
    })
  },

效果