一、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表示根据价格降序查询商品数据。