一个基于weui写的商品排序功能——一个后端写这个老费劲了

我一个后端搞这个东西花了好几个小时！！！！写好了希望下次可以使用，我是比较粗暴的，能用就行的逻辑写的。

效果：

html代码：

<header class='weui-header'>
  <div class="weui-flex sort">
    <div class="weui-flex__item sort-item"  data-tag=""><div class="placeholder">默认</div></div>
    <div class="weui-flex__item sort-item" data-tag="sale_desc"><div class="placeholder" >销量</div></div>
    <div class="weui-flex__item sort-item" data-tag="price">
        <div class="placeholder">
        价格
        <span class="sort-price" style="text-align: center">
        <span class="arrow-up  arrow sort-price" data-tag="price_asc"></span>
        <span class="arrow-down  arrow sort-price" data-tag="price_desc"></span>
        </span>

        </div>
    </div>
        <div class="weui-flex__item sort-item" data-tag="commission">
            <div class="placeholder">
        佣金
        <span class="sort-price" style="text-align: center">
        <span class="arrow-up  arrow sort-commission" data-tag="commission_asc"></span>
        <span class="arrow-down  arrow sort-commission" data-tag="commission_desc" ></span>
        </span>

    </div>
    </div>

</div>
</header>

css部分：

.sort{
    background: white;
}
.sort .sort-item{
    text-align: center;
    line-height: 30px;
    border-left: 1px solid #80808024;
    height: 30px;
}



.arrow-up {
    width: 0px;
    height: 0px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #e0cece;
    font-size: 0px;
    line-height: 0px;
    margin: 0 auto;
    vertical-align: middle;
    position: relative;
    top: -8px;
    left: 4px;
}
.arrow-down {
    width: 0px;
    height: 0px;
    border-left: 6px solid transparent;
    border-right: 6px solid #e4060600;
    border-top: 7px solid #e0cece;
    font-size: 0px;
    line-height: 0px;
    display: block;
    margin: 0 auto;
    vertical-align: middle;
    position: relative;
    top: -15px;
    left: 20px;
}

.arrow-down-active{
    border-top: 7px solid #fb0505 !important;
}
.arrow-up-active{
    border-bottom: 7px solid #fb0505 !important;
}

.sort-item-active{
    color: red;
}

js捕获点击事件和修改显示：

var sort;
$(".sort-item").on('click',function () {
    sort = '';
    $(".sort-item").removeClass('sort-item-active')
    $(this).addClass('sort-item-active')
    var tag = $(this).data('tag');

    if (tag ==='price'){
        $(".sort-commission").removeClass('arrow-up-active');
        $(".sort-commission").removeClass('arrow-down-active');
       var arrow = $(this).find('.arrow');
       if ($(arrow[0]).hasClass('arrow-up-active')){
           $(arrow[0]).removeClass('arrow-up-active');
           $(arrow[1]).addClass('arrow-down-active');
           sort = $(arrow[1]).data('tag');
       }else {
           $(arrow[0]).addClass('arrow-up-active');
           $(arrow[1]).removeClass('arrow-down-active');
           sort = $(arrow[0]).data('tag');
       }
    }else if(tag === 'commission'){
        $(".sort-price").removeClass('arrow-up-active');
        $(".sort-price").removeClass('arrow-down-active');
        var arrow = $(this).find('.arrow');
        if ($(arrow[0]).hasClass('arrow-up-active')){
            $(arrow[0]).removeClass('arrow-up-active');
            $(arrow[1]).addClass('arrow-down-active');
            sort = $(arrow[1]).data('tag');
        }else {
            $(arrow[0]).addClass('arrow-up-active');
            $(arrow[1]).removeClass('arrow-down-active');
            sort = $(arrow[0]).data('tag');
        }
    }else {
        sort = tag;
    }


    console.log('sort',[tag,sort]);
    //cpage = 0;
    //getData = true
   // $(".wy-pro-list").empty();
   // addItem();
});

因为找了很久没有找到一个好用的weui版商品排序，老子自己写就算了，那个箭头实在是祸害，改用背景图片不想研究，算了，这个已经很棒了。