一、wxml添加升序和降序
在商品清單的wxml檔案中添加超連結a标簽,分别用于升序和降序的點選。分别綁定升序和降序的點選事件。
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiIn5GcuIDN5UDOxIzM50SM0AjN1IzMxETNxcDMxIDMy0yN4MjN5MjMvw1NwEjMwIzLcdDOzYTOzIzLcd2bsJ2Lc12bj5ycn9Gbi52YuAjMwIzZtl2Lc9CX6MHc0RHaiojIsJye.png)
二、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表示根據價格降序查詢商品資料。