天天看點

微信小程式雲開發-資料庫-商品清單資料排序

一、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表示根據價格降序查詢商品資料。

微信小程式雲開發-資料庫-商品清單資料排序