(1)vant-list上滑加载
list这个组件,必须具有高度,才能实现上滑加载,不然不会有上滑加载的过程。
因为没有高度,相当于整个屏幕都是组件的,就没有底部一说,所以会一直加载所有的,
类似下面的列表,是有高度的。
方法:
- 可以用flex布局
.view {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
width: 100%;
height: 100%;
}
.header {
}
.content {
overflow-y: scroll;
}
list用vant的list就可以。
<List
class="drop-list"
v-model="loading"
:finished="finished"
finished-text="没有更多了"
:offset="10"
@load="onLoad"
>
<ReferraldoctorList v-for="(item,index) in doctorList" :key="index" :item="item"></ReferraldoctorList>
</List>
(2)搜索后数据重复
onsearch中直接执行onLoad,不要直接调用接口,不然接口和onLoad都会执行一遍
onSearch(value){
this.init()
// this.getArtivleList(this.isAll, this.typeValue)
this.onLoad()
},
(3)加载后,list回到顶部
因为请求后台接口时,统一加了toast Loading的提示,且设置了 forbidClick: true,
解决办法,请求后台接口时,加一个setTimeout
onLoad() {
this.loading = true
if(!this.finished){
setTimeout(() => {
this.getZJDoctortList()
}, 200);
}
},