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

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

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

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

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

---

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

我设置了页面有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:;
  left:;
}
 
.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>

实现效果如下图：

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