人生于世,飘忽若浮萍
— 暖暖
vue2.0 — 移动端的输入框实时检索更新列表 (一):http://www.cnblogs.com/sunshinedream/p/9003811.html
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~