微信小程序 按钮固定在页面底部遮住页面显示内容问题

我们分为以下部分来解决这个问题：

第一部分：问题的表现是怎么样的？

第二部分：问题的是如何实现的？

第三部分：如何解决问题？

 

---

 

第一部分：问题的表现是怎么样的？

我设置了页面有0-99共100个数，但是最后几个数字被底部固定的按钮遮挡住了，显示不全

 

第二部分：问题的是如何实现的？

第一步：首先实现按钮固定在页面底部，需要设置按钮的position为fixed

（注意：文章底部回帖出全部代码，以下只是针对性的贴出此时正在说明的代码）

index.wxml页面：

<view class=\'btn-view\'>
    <button class=\'btn\'>底部按钮</button>
</view>

index.wxss页面：

.btn-view {
  width: 100%;
  padding: 20rpx 0;
  background-color: yellow;
  position: fixed;
  bottom: 0;
  left: 0;
}

.btn {
  width: 90%;
}

实现效果如下图： 

 

 

第二步：给页面填充数据

index.js页面：

var list = []
for (var i = 0; i < 100; i++) {
    list.push(i)
}

this.setData({
    list:list
})

index.wxml页面：

<view class=\'list\'>
    <view class=\'li\' wx:for=\'{{list}}\' wx:key=\'\'>{{item}}</view>
</view>

 

实现效果如下图： 

 

结束之后，我们就会发现，结果会如第一部分展示的那样，按钮遮挡住了页面不部分内容