vant2.x中的list组件

问题

当列表占不满屏幕时，背景色差不同视觉效果很差，如下图

before.png

解决后

after.png

如何解决

我们只需要计算出组件在视口页面中的高度即可，页面高度设为100vh

mounted() {
    //页面高度
    this.list = document.querySelector(".list");
    //头部高度
    this.head = document.querySelector(".tit_bar_cont");
    //44是vant组件tab栏的高度
    //结果
    this.listHeight = this.list.clientHeight - this.head.clientHeight - 44 + "px";
  },

由于不同tab栏展示的数据结构一致，我对list组件进行了二次封装以复用，命名为playWithBaseList,下图是使用。可以在组件内部设置相应的背景颜色，也可以在动态style中传入

<playWithBaseList
    tabType="accept"
    :style="{ height: listHeight, overflowY: 'scroll' }"
 ></playWithBaseList>