vant ui 组件踩坑合集1、List 组件一直调用接口直到没有数据解决方案： 1.设置immediate-chec

1、List 组件一直调用接口直到没有数据

vant ui的List组件的onload触发机制是当内容触发到页面底部的offset的位置时，并且loading状态为true就一直加载，直到finished.

解决方案： 1.设置immediate-check="false"，不要加载组件的时候就开始加载数据； 2.将List数据分成初始化数据和附加数据两部分，第一部分直接初始化，这时的分页可以根据页面高度算出pageSize；

2、List组件的finished处理问题

一般情况下当数据长度大于或者等于后台返回总长度时设置finished=true,但是如果后端报错了或者是空数据的时候不设置finished=true,会导致一直向后端发送请求。

解决方案：设置finished=true时添加上报错或者空数据的情况

3、Popup组件中添加Tab和list组件后的滚动问题

vant ui Popup组件是fix布局，导致在部分iOS系统下无法兼容，会出现滑动穿透问题

解决方案：目前是设置CSS样式touch-action:pan-y在需要滑动的元素上，暂时解决了滑动穿透问题

4、通过component + is 的方案渲染Field textarea组件右下角计数器不会更新的问题

<component v-model="动态属性" is="van-field" maxlength="20" show-word-limit/>，如果vue data 里面不存在这个动态属性那么输入的时候是计数器是没办法更新的。

解决方案： 1、在data里面添加这个动态属性； 2、将动态属性绑定到vue实例上；

5、通过动态赋值Tabs,Tab时，下滑线定位不准确的问题

解决方案：将van-tabs样式属性设置为position:relative

6、vant的Checkbox选择无反应

原因: 页面渲染时每个item中并没有parkChecked 这个属性,所以失效

<div v-if=parkInfo.length !== 0>
<template v-for="item in parkInfo">
<van-checkbox v-model="item.parkChecked"></van-checkbox>
</template>
</div>

初版:
this.parkInfo = res.content.charge_detail[1].charge_info;
this.parkInfo.map(item=>{
     item.parkChecked = false;
})

修改后:
let result = res.content.charge_detail[1].charge_info;
result.map(item=>{
     item.parkChecked = false;
})
this.prikInfo = result;

解决方案：先把每个item附上parkChecked属性,然后再进行渲染

vant ui 组件踩坑合集