微信小程序---排序按钮的样式编写

微信小程序中的排序按钮样式编写通常涉及到CSS样式规则。为了创建一个基本的排序按钮，你可以使用`wx:if`或`data-index`来控制按钮的状态，并使用`.wx-btn`、`.wx-btn-primary`等类来自定义其样式。例如：

<view class="sort-container">
  <button wx:for="{{items}}" wx:key="index" :class="{'sort-button': true, 'selected': index === selectedIndex}" bindtap="handleSort">
    <text>{{item.label}}</text>
  </button>
</view>

<style scoped>
.sort-button {
  display: inline-block;
  width: 50%;
  height: 44rpx;
  line-height: 44rpx;
  border: none;
  background-color: #e9eaee;
  color: #676767;
  text-align: center;
  cursor: pointer;
}

.sort-button.wx-btn.wx-btn-primary {
  background-color: #3f51b5;
  color: white;
}

.selected {
  background-color: #33ccff;
}
</style>

<script>
Page({
  data: {
    items: ['按名称', '按日期', '按价格'],
    selectedIndex: 0,
  },
  handleSort(e) {
    // 根据点击的按钮索引来更新数据的排序逻辑
    this.setData({selectedIndex: e.detail.index});
  }
})
</script>

在这个例子中，`.sort-button`是一个通用样式，`selected`则是当按钮被选中时应用的样式。`handleSort`函数会在用户点击按钮时被触发，处理排序逻辑。