移动端tabbar遮挡文档内容后解决方法

1.情况说明

如图是在调试环境下数据的显示情况，数据的最后一条（再试一下）并没有显示出来

2.解决方法：

前提：定义tabbar且固定tabbar的高度为48px：

这里提供了两种思路，但是用的都是一种方法；（2选1即可解决方法）

1.使用自带的组件group传递padding-bottom属性；

//wxml

<van-cell-group inset style="--height--:{{bottom_height}}px;">
  <van-cell wx:for="{{List}}" wx:for-item="item" wx:key="id" title="{{item.title}}" value="{{item.content}}" label="{{item.Time}}" />
</van-cell-group>

//wxss

.van-cell-group{
  padding-bottom:var(--height--);
}

//js

Page({
    data: {
    bottom_height: 0,
  },
  onLoad: function (options) {
    const res = wx.getSystemInfoSync()
    this.setData({
      bottom_height: 54 + res.screenHeight - res.safeArea.bottom
    })
    console.log(res);
  },
})

2.在页面的底部加一个空的view，并且设置height属性；

//wxml

<view class="footer" style="--height--:{{bottom_height}}px;"></view>

//wxss

.footer{
  height:var(--height--);
}

js部分代码是一致的。