页面底部固定显示按钮，同时不覆盖页面内容

在页面底部添加按钮，并让它始终保持在页面底部，不随着下拉而改变位置，同时按钮不能覆盖页面内容。

效果图如下：

首先实现固定按钮在底部：

<View className='navigate-container'>
  <View className='at-row'>
    <AtButton className='AtButton button_last' onClick={() => {Taro.navigateBack()}}>返回</AtButton>
    <AtButton className='AtButton button_next' onClick={this.handleSubmit}>下一步</AtButton>
  </View>
</View>

.navigate-container {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #ffffff;
  padding: 10rpx;
  box-shadow: 0rpx -2rpx 5rpx 0rpx rgba(0,0,0,0.1);
  z-index: 999;
}

此时存在的问题就是当页面滑到底部时，按钮会覆盖页面内容。

  

解决方法：

直接在页面之中添加一个Veiw，使其占据一定的高度，从而使页面内容能够完整显示。

<View className='placeholder-view' />

.placeholder-view {
  width: 100%;
  height: 120rpx;
}

完整代码如下：

<View className='placeholder-view' />
<View className='navigate-container'>
  <View className='at-row'>
    <AtButton className='AtButton button_last' onClick={() => {Taro.navigateBack()}}>返回</AtButton>
    <AtButton className='AtButton button_next' onClick={this.handleSubmit}>下一步</AtButton>
  </View>
</View>

.placeholder-view {
  width: 100%;
  height: 120rpx;
}

.navigate-container {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #ffffff;
  padding: 10rpx;
  box-shadow: 0rpx -2rpx 5rpx 0rpx rgba(0,0,0,0.1);
  z-index: 999;
}