Vue歷史城市搜尋記錄查詢(攜程H5效果)

sunny在未來等我們。發表於2018-03-06

相關需求:

——————————————————————————————————————

  • 每次點選搜尋都會生成一個歷史記錄
  • 歷史記錄不能重複,以最新的查詢結果為準
  • 要區分單程和往返(點選時候需要對應切換)
  • 最多五條歷史記錄
  • 可以左右滑動(better-scroll)
  • 封裝一個單獨的可擴充套件的元件

業務程式碼:

——————————————————————————————————————

首先很簡單,就是把你需要的值存放在一個物件裡面,然後存放在sessionStorage裡面

這一塊是應用業務程式碼,跟封裝的元件沒有實質關係,只是應用元件

程式碼如下

Vue歷史城市搜尋記錄查詢(攜程H5效果)

元件程式碼

——————————————————————————————————————

現在重點封裝歷史記錄元件,直接上程式碼

首先是html模板程式碼,應該沒什麼難點

Vue歷史城市搜尋記錄查詢(攜程H5效果)

js程式碼,主要用到陣列去重,刪除,篩選

還有就是注意Json.parse()=>用來解析json字串的

Json.stringify()將一個物件或者陣列轉換成Json字串

Vue歷史城市搜尋記錄查詢(攜程H5效果)

最後就是應用該元件的時候,要用到父子元件間的通訊ref

Vue歷史城市搜尋記錄查詢(攜程H5效果)

呼叫父元件裡面的方法,如果每個頁面應用該元件都這樣寫addHistory方法,會有很多這重複性程式碼

Vue歷史城市搜尋記錄查詢(攜程H5效果)


應用程式碼

——————————————————————————————————————接下來就是應用了,所有的值都在sessionStorage物件裡面

列印item就可以拿個每個物件的值了

Vue歷史城市搜尋記錄查詢(攜程H5效果)

這裡應用比較複雜一下,暫時不管這些,反正拿到資料要看具體的業務需求,然後根據需求隨便你去玩。


相關文章