问题
当列表占不满屏幕时，背景色差不同视觉效果很差，如下图
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>
网友评论