小程序——固定底部按钮+解决内容遮挡问题

效果如下：


（因为防止信息泄露手动打码）

可以看到“添加订单”按钮在固定底部，对后面的内容有遮挡（也就是点击按钮的同时不会点击到后面的内容），内容滑动完毕后留有按钮的空白

参考资料：按钮固定在页面底部遮住页面显示内容问题

xml和css代码如下：

xml代码：

  <view class='placeholder-view'></view>
  <view class='add_btn'>
    <button class='btn' bindtap="addorder">添加订单</button>
  </view>

css代码：

.placeholder-view {
width:750rpx;
height:116rpx;
padding:0rpx;
clear:both;
float:left;
text-align:left; 
line-height:116rpx;
}

.add_btn{
width:100%;
position: fixed;
bottom: 30rpx;
}

.btn{
margin-top: 30rpx;
width: 450rpx;
background: linear-gradient(#51D8D0, #02C0B5); 
color: #fff;
border-radius: 70rpx;
text-align: center;
font-size: 26rpx;
bottom:0rpx;
margin-left: 150rpx;
}

我用的是参考资料中提到的解决方法的第一种,设置了.placeholder-view的特殊样式，其中的关键代码是padding:0rpx;clear:both;float:left;这几句设置了下方位置的固定，注意height和line-height的高度一定要是相等的

add_btn中的关键性代码是width:100%;position: fixed;，bottom只是下边距，不至于让按钮贴着底边

.btn中按照设置的正常按钮样式写就可以