完成的效果如下:

看起來好像很簡單但是也是幾經波折,所以特意記錄下來

非微信小程式的解決方案

如果不是微信小程式,而且HTML程式碼,還是比較好實現的,美工提供了三套圖示

通過background-image引入圖示,然後通過更換class實現點選圖示更換效果,這裡不細表了

微信小程式存在的問題

不知道何種原因,在微笑小程式中,wxss檔案是無法訪問本地靜態資源的,所以也就無法通過background-image引入圖示
於是想辦法,辦法就是,採用字型符號
於是從阿里巴巴向量圖示庫找到對應的圖示

然後設定css如下

.icon-order-up
 
::before {
  .active {
    color: #ff8d68;
  }
  .inactive {
    color: #333333;
  }
  font-size: 28rpx;
  content: "\e7fe";
}

.icon-order-down::after {
  .active {
    color: #ff8d68;
  }
  .inactive {
    color: #333333;
  }
  font-size: 28rpx;
  position: absolute;
  right: 0rpx;
  content: "\e74d"
 
;
}

頁面如下

<!--佔據整個螢幕寬度的資源列表項-->
<style lang="less">
.item-list {
  .sort { background-color: #f3f4f5;
    padding: 26rpx 55rpx 26rpx 55rpx;
    display: flex;
    justify-content: space-between;
    font-size: 28rpx;
    view { display: flex;
    }
  }

  .sort-item {
    position: relative
 
;
  }
  .inactive {
    color: #333333;
  }
  .active {
    color: #ff8d68;
  }
  .list {
    display: flex;
    flex-wrap: wrap;
    margin: 0rpx 35rpx 36rpx 35rpx;
    view { display: flex;
      flex-wrap: wrap;
    }
  }
}
</style>
<script>
import wepy from 'wepy'
import Grid from './grid'
export default class ItemList extends wepy.component {
  data = {
    sortList: [{
      title: '人氣',
      active: true,
      asc: true,
      desc: false
    }, {
      title: '上架時間',
      active: false,
      asc: true,
      desc: false
    }]
  }
  props = {
    list: {}
  }
  components = {
    grid: Grid
  }
  methods = {
    orderBy (index) {
      console.log(this.sortList)
      if (this.sortList[index].active === true) {
        this.sortList[index].asc = !this.sortList[index].asc
        this.sortList[index].desc = !this.sortList[index].desc
      } else {
        this.sortList[index].active = true
        this.sortList[index].asc = true
        this.sortList[index].desc = false
        for (var i = 0, len = this.sortList.length; i < len; i++) {
          if (i !== index) {
            this.sortList[i].active = false
          }
        }
      }
      this.$apply()
    }
  }
}
</script>
<template>
  <view class="item-list">
    <view class="sort">
      <black wx:for={{sortList}}>
        <view class="sort-item {{item.active?'active':'inactive'}}" @tap="orderBy({{index}})">
          <view class="">{{item.title}}</view>
          <view class="iconfont icon-order-up {{item.active&&item.desc?'active':'inactive'}}"></view>
          <view class="iconfont icon-order-down {{item.active&&item.asc?'active':'inactive'}}"></view>
        </view>
      </black>
    </view>
    <view class="list">
      <repeat for="{{list}}" key="index" index="index" item="item">
        <grid :item.sync="item"></grid>
      </repeat>
    </view>
  </view>
</template>