相关需求:
——————————————————————————————————————
- 每次点击搜索都会生成一个历史记录
- 历史记录不能重复,以最新的查询结果为准
- 要区分单程和往返(点击时候需要对应切换)
- 最多五条历史记录
- 可以左右滑动(better-scroll)
- 封装一个单独的可扩展的组件
业务代码:
——————————————————————————————————————
首先很简单,就是把你需要的值存放在一个对象里面,然后存放在sessionStorage里面
这一块是应用业务代码,跟封装的组件没有实质关系,只是应用组件
代码如下
组件代码
——————————————————————————————————————
现在重点封装历史记录组件,直接上代码
首先是html模板代码,应该没什么难点
js代码,主要用到数组去重,删除,筛选
还有就是注意Json.parse()=>用来解析json字符串的
Json.stringify()将一个对象或者数组转换成Json字符串
最后就是应用该组件的时候,要用到父子组件间的通信ref
调用父组件里面的方法,如果每个页面应用该组件都这样写addHistory方法,会有很多这重复性代码
应用代码
——————————————————————————————————————接下来就是应用了,所有的值都在sessionStorage对象里面
打印item就可以拿个每个对象的值了
这里应用比较复杂一下,暂时不管这些,反正拿到数据要看具体的业务需求,然后根据需求随便你去玩。