小程序如何制作商品列表排序

小程序商城里，通常會有商品列表，里邊還會有排序點(diǎn)擊，那么這種排序點(diǎn)擊的樣式是如何開發(fā)的？

wxml：

wxss：

.sort-wrap{
  height:90rpx;
  background-color:#fff;
}
.sort-btn{
  width:33.333%;
  float:left;
  text-align: center;
  height:90rpx;
  line-height:90rpx;
  font-size: 28rpx;
  color:#333;
}
.sort-btn image{
  width: 9rpx;
  height: 18rpx;
  margin-left:6rpx;
}

js:

Page({

  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    imageurl1: "../../img/sort-tip_05.png",
    daindex1: 0,
    imageurl2: "../../img/sort-tip_05.png",
    daindex2: 0
  },
  /*  tab   */
  choosesort1: function (e) {
    if (this.data.daindex1 == 0) {
      this.setData({
        imageurl1: "../../img/sort-tip_03.png",
        daindex1: 1
      })
    } else {
      this.setData({
        imageurl1: "../../img/sort-tip_05.png",
        daindex1: 0
      })
    }

  },
  choosesort2: function (e) {
    if (this.data.daindex2 == 0) {
      this.setData({
        imageurl2: "../../img/sort-tip_03.png",
        daindex2: 1
      })
    } else {
      this.setData({
        imageurl2: "../../img/sort-tip_05.png",
        daindex2: 0
      })
    }

  }
  
})

HiShop小程序工具提供多類型商城/門店小程序制作，可視化編輯 1秒生成5步上線。通過拖拽、拼接模塊布局小程序商城頁面，所看即所得，只需要美工就能做出精美商城。更多小程序商店請查看：小程序商店