1. The List component calls the interface until there is no data

The Onload mechanism for the List component of the Vant UI is that content is loaded in the bottom of the page at offset and loaded in the True state until finished.Copy the code

Solution: 1. Set the parameter “immediate-check” to “false”. Do not start loading data while loading components. 2. Divide the List data into initialization data and additional data. The first part is initialized directly, and the pageSize can be calculated according to the page height.

2. The Finished List component handles the problem

In general, the finished value is set when the data length is greater than or equal to the total length returned from the background. If the finished value is not set when errors are reported or data is empty at the back end, requests are sent to the back end.Copy the code

Solution: Set FINISHED =true to add errors or empty data

3, Popup component after adding Tab and list components scrolling problem

The Vant UI Popup component is a fix layout, which causes incompatibility on some iOS systems and slip-through problemsCopy the code

Solution: The current CSS style touch-Action :pan-y is set on the elements that need to be swiped, temporarily solving the slide penetration problem

Component + IS: the Field Textarea counter doesn’t update

<component v-model=" dynamic "is="van-field" maxlength="20" show-word-limit/> <component v-model=" dynamic" is="van-field" maxlength="20" show-word-limit/>Copy the code

Solution: 1. Add this dynamic property to data; 2. Bind dynamic properties to vUE instances;

5, through the dynamic assignment of Tabs,Tab, slide line positioning is not accurate

Solution: Set the van-tabs style property to Position :relative

6, Vant Checkbox select no response

Reason: The page rendering does not have the parkChecked property in each item, so it is invalid

<div v-if=parkInfo.length ! == 0> <template v-for="item in parkInfo"> <van-checkbox v-model="item.parkChecked"></van-checkbox> </template> </div> First version: 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;Copy the code

Solution: Attach the parkChecked property to each item before rendering it