坑
- van-pull-refresh 里面要包含一个<div ref="fresh’> 在mounted里面设置一下高度 屏幕可视高度 - box距离顶部top,因为van-pull-refresh有个overflow:true属性,高度不够的时候下拉的时候会隐藏一些内容。
mounted () {
this.freshHeight = document.documentElement.clientHeight - this.$refs.fresh.getBoundingClientRect().top
}
- 设置div ref="fresh的 overflow-y:scroll 属性让其内部列表可以滚动。设置了div ref="fresh的 padding-bottom后这样不会被底部tabbar遮盖,最重要的是设置box-sizing’: 'border-box’
- 如果列表没有就展示没有数据的图片,我写成了组件,要写在div ref="fresh 里面,如果写在外面,会因z-index层叠样式原因会覆盖下拉组件导致不起作用。
贴上全部代码
<template>
<div class="wrapper">
<div class="search" @click="$router.push({ path: '/search' })">
<van-search disabled placeholder="请输入搜索关键词" />
</div>
<va