vue2.0 — 移动端的输入框实时检索更新列表 (二)

也许于你而言,

                             — 暖暖


vue2.0  —  移动端的输入框实时检索更新列表 (一)用了一种传参数的形式实现的,但是觉得不太好,毕竟vue的核心技术点双向数据绑定没用上,本着这个原则,换了双向绑定的方法~

html   

js

1、这里input搜索框的value值我们用了v-model绑定了data()函数下面的CONDITION的key,由于项目功能效果的实现所以inputValue初始的时候要置为空。

2、原来的监测调用函数采用操作dom形式了,现在改成,直接操作数据,当我们value值变化时调用inputFunc函数,由于这时候我们的搜索结果从第一页开始所以,currentpage要置为1,然后调用函数queryData(),做数据请求。

3、queryData()这里面请求的参数,都采用了全局对象中获取的方式,这样子才真正的做到了操作数据。

 后记:我们这里面的用到了weex里面的上拉加载数据,下拉刷新数据,这里面说下思路~

          

    

  

  

   1、下拉刷新数据 — 查询的是最新数据,所以currentpage=1的第一页数据就ok,又由于我们刷新的数据去的是数组customerlist里面最新的数据所以isConcat要置为false,不拼接数据。

           2、上拉加载数据 — 当我们做这个操作的时候isConcat要置为true因为请求的数据是要拼在旧数据的后面,而且要随着手势的上拉操作不断改变currentpage的值,这时候每上拉一次页码就要+1,但是在loadding函数里面写这个累加的方法会导致bug,就是当数据没请求成功的时候或者请求到最后一页之后,你的手势仍然不断的累加,但是这时候数据根本没响应到页面中

   

          3、所以,累加的步骤要写在success里面数据的后面,成功了之后,this.CONDITION.currentpage全局里面的页码自动+1,下次请求的就是this.CONDITION.currentpage里面最新的数据。并不会引发bug

          

       【END】thankyou~

猜你喜欢

转载自www.cnblogs.com/sunshinedream/p/9012700.html