List 组件可以与 PullRefresh 组件结合使用,可以实现列表下拉刷新的效果,但是当下拉刷新后更新的数据展示在页面上不能撑满 List 列表中的内容的时候,他并不会主动触发列表刷新,以至于来填满列表。
可以给list组件添加ref属性,然后在下拉刷新后,在下拉刷新的事件里手动调用this.$refs.listRef(你的list的ref名称).check()来触发列表加载后续的数据 // list组件 <van-list v-model="loading" ref="listRef" // 1. 绑定ref :finished="finished" finished-text="没有更多了" :error.sync="error" error-text="请求失败,点击重新加载" @load="onLoad" > // 下拉刷新的事件 onRefresh() { ...刷新成功后 // 2.手动去让下拉刷新后,去执行list列表的load事件 this.$refs.listRef.check() }如果你把List 组件可以与 PullRefresh 组件结合使用封装成一个组件,然后在父组件中使用的时候,需要给封装的这个组件传list组件的v-model的值来控制list是否处于加载状态。 然后在父组件传 v-moel=“loading” 或者 :is-loading.sync=“loading” 传给子组件让他来控制子组件的list的v-model的控制load加载状态,按理说v-model 默认是 value 属性和 input 事件的组合,但是list组件的文件默认修改了,把传过去的value用 model: { prop: ‘loading’ }修改了,所以我们在子组件接收的时候不能用value 要用loading 此图为vant的源码
// 父组件 给子组件传list的v-model的值 :is-loading.sync="loading" // 或写成 v-model="loading" // 子组件 list组件 // 子组件不能用value接收 // :value="isLoading" // 应该写成loading :loading="isLoading"