vue2.0 — real-time retrieval and update list of the input box of the mobile terminal (2)

Maybe for you,

                          　　 — Nuan Nuan

 

---

 

Vue2.0 - Real-time retrieval and update list of input box on mobile terminal (1) It is implemented in the form of passing parameters, but I don't think it is very good. After all, the core technology of Vue is two-way data binding is useless. Based on this principle , changed the two-way binding method~

html   

js

 

1. For the value of the input search box here, we used v-model to bind the key of CONDITION under the data() function. Due to the realization of the project function effect, the inputValue should be set to empty initially.

2. The original monitoring call function is in the form of operating DOM. Now it is changed to operate the data directly. When our value changes, the inputFunc function is called. Since our search results start from the first page at this time, the currentpage should be set to 1 , and then call the function queryData() to make a data request.

3. The parameters requested in queryData() are all obtained in the global object, so that the data can be truly manipulated.

 

 Postscript: We use the pull-up load data in weex, pull-down refresh data, here's the idea~

          

　　　　

　　

　　

 

 

 

　　　1. Pull down to refresh the data - the latest data is queried, so the data on the first page of currentpage=1 is ok, and because the data we refreshed is the latest data in the array customerlist, isConcat should be set to false, and the data will not be spliced.

 

           2. Pull up and load data - when we do this operation, isConcat should be set to true because the requested data is to be spelled behind the old data, and the value of currentpage should be changed continuously with the pull-up operation of the gesture. Pulling up the page number requires +1, but writing this accumulation method in the loading function will lead to bugs, that is, when the data is not successfully requested or after the last page is requested, your gestures are still continuously accumulated, but this time The data is not responding to the page at all

　　　

 

          3. Therefore, the accumulation step should be written after the data in success. After success, the page number in this.CONDITION.currentpage is automatically +1, and the next request is the latest data in this.CONDITION.currentpage. does not cause bugs

          

       【END】thankyou~