思路:设置css样式;将样式的类名作为值在js中付给切换标志;在wxml中绑定不同的切换标志即可。
.unselected_price{
display: inline;
color: #000000;
}
.selected_price{
display: inline;
color: #ff6633;
}
<view class='iconuse2' bindtap="select_price">
价格<view class="{{select_price1}}">↥</view><view class="{{select_price2}}">↧</view>
</view>
data: {
select_price1: 'unselected_price',
select_price2: 'unselected_price',
},
/**
* 价格排序
*/
select_price: function(){
//由低到高
if (this.data.select_price1 == 'unselected_price' && this.data.select_price2 == 'unselected_price' || this.data.select_price1 == 'unselected_price' && this.data.select_price2 == 'selected_price'){
this.setData({
select_price1: 'selected_price',
select_price2: 'unselected_price',
});
//由高到低
} else if (this.data.select_price1 == 'selected_price' && this.data.select_price2 == 'unselected_price'){
this.setData({
select_price1: 'unselected_price',
select_price2: 'selected_price',
});
}