用的vant的List、Collapse，大致如下格式：
当切换折叠面板时，list组件就请求接口拉取数据展示到自定义组件中。
1
2
3
4
5
6
7
8
9
10
11
| <van-collapse v-model="activeCollapse" @change="onCollapseChange" accordion>
<van-collapse-item v-for="(record, index) in recordList" :key="index" :name="record.id">
<van-list
v-model="****"
:finished="****"
@load="****"
>
<foo>自定义组件...</foo>
</van-list>
</van-collapse-item>
</van-collapse>
|
在第二次开始的折叠操作中，List组件就会重复请求两次接口导致数据重复。
解决的办法也很简单，保证每次只渲染了一个List就行：
在onCollapseChange事件触发后记录下当前的record.id（这里用selectId表示），然后在List组件里加上v-if判断就解决啦。
1
2
3
4
5
6
7
8
9
10
11
12
| <van-collapse v-model="activeCollapse" @change="onCollapseChange" accordion>
<van-collapse-item v-for="(record, index) in recordList" :key="index" :name="record.id">
<van-list
v-if="selectId === record.id" // 加上这个判断
v-model="****"
:finished="****"
@load="****"
>
<foo>自定义组件...</foo>
</van-list>
</van-collapse-item>
</van-collapse>
|
