uniapp需要一个筛选的按钮，点击可以实现调整排序，根据排序对箭头方向进行调整显示。

组件使用实例

<div class="screenings">
	<screening :active.sync="orderby_sales" title="销量"></screening>
	<screening :active.sync="orderby_price" title="价格"></screening>
</div>

组件代码

<template>
	<div class="tab" @click="getactive">
		<span>{{ title }}</span>
		<u-icon size="12" v-if="active==0" name="arrow-down"></u-icon>
		<u-icon size="12" v-if="active==1" name="arrow-up"></u-icon>
	</div>
</template>
<script>
	export default {
		name: "tabs",
		components: {},
		props: {
			title: {
				type: String,
				default () {
					return '';
				}
			},
			active: {
				type: Number | String,
				default () {
					return 0;
				}
			},
		},
		data() {
			return {

			}
		},
		watch: {},
		mounted() {},
		methods: {
			getactive() {
				this.$emit('update:active', this.active ? 0 : 1)
			},
		}
	}
</script>
<style scoped lang="scss">
		.tab {
			display: flex;
			height: 58rpx;
			font-family: PingFangSC-Regular;
			font-size: 24rpx;
			color: #555555;
			text-align: center;
			font-weight: 400;
			box-sizing: border-box;
			justify-content: center;
			align-items: center;
			margin-right: 30rpx;
			flex-wrap: nowrap;
			flex-direction: row;
			align-content: flex-start;

			span {
				font-size: 24rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: rgba(33, 33, 33, 1.00);
				margin-right: 10rpx;
			}

		}
</style>