一、wxml添加升序和降序
在商品列表的wxml文件中添加超鏈接a標簽,分別用於升序和降序的點擊。分別綁定升序和降序的點擊事件。
二、js文件實現升序和降序
分別寫對應的按價格升序函數sortByPriceAsc()和按價格降序函數sortByPricDesc()。此時已完成升序和降序的功能。
三、代碼優化去除冗余代碼
以上代碼的寫法可以滿足功能需要,但是性能方面想要更優化,需要對代碼進行去除冗余的處理。該頁面存在三次查詢數據庫:
- 1.頁面加載的時候,查詢商品信息展示在列表頁(即onload()里面需要查詢數據庫表goods訪問數據,不需排序)
- 2.按價格升序的時候,查詢商品信息展示在列表頁(即sortByPriceAsc()里面查詢數據庫表goods訪問數據,需要按價格升序排序)
- 3.按價格降序的時候,查詢商品信息展示在列表頁(即sortByPriceDesc()里面查詢數據庫表goods訪問數據,需要按價格降序排序)
我們可以將三者重復的部分提取出來,定義一個函數getGoods()用於查詢商品數據。傳遞參數type,定義type:0代表不做任何排序 1代表升序 -1代表降序。
然后分別在需要的時候調用getGoods()函數,分別傳遞對應的參數即可。
onload()里面,調用getGoods(),type傳遞0表示不根據任何排序查詢商品數據。
sortByPriceAsc()里面,調用getGoods(1),type傳遞1表示根據價格升序查詢商品數據。
sortByPriceDesc()里面,調用getGoods(-1),type傳遞-1表示根據價格降序查詢商品數據。