关于vant组件list轮动加载事件中click事件失效踩坑记录

由来:

由于项目需求要在列表页做分页效果,所有引入list官方组件触发下拉加载下一页数据,在使用过程中出现点击事件失效的情况.

 <van-list
    class="reserve-list"
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="getReserveList"
 >
    <div v-for="item in list" :key="item.id"  @click="toClick(item.id)>{{item.value}}</div>
</van-list>

toClick点击事件失效的原因在于van-list样式中添加了position: relative,如下图将其注释掉即可恢复点击事件正常触发

.reserve-list {
  // position: relative;
  z-index: -1;
 }