activitys-uniapp/components/filterBar/filterBar.vue

<template>
	<view class="filter-bar-container" :style="vuex_skin">
		<u-sticky :offset-top="offsetTop" :bg-color="bgColor" h5-nav-height="0" @fixed="handleFixed" @unfixed="handleUnfixed">
			<view class="filter-bar" :style="{background: bgColor}">
				<view class="filter-item" v-for="(item, index) in filterList" :key="index" @click="handleExchangeTag(index)">
					<text :class="currentIndex == index ? 'activity' : ''">{{item.title}}</text>
					<view class="filter-icon" v-if="index == 2">
						<u-icon name="arrow-up-fill" :color="currentIndex == index && sort == 'asc' ? vuex_theme.bgColor : ''" size="14"></u-icon>
						<u-icon name="arrow-down-fill" :color="currentIndex == index && sort == 'desc' ? vuex_theme.bgColor : ''" size="14"></u-icon>
					</view>
				</view>
			</view>
		</u-sticky>
	</view>
</template>

<script>
	export default {
		props: {
			currentIndex: 0
		},
		data() {
			return {
				filterList: [{
					title: '综合'
				},{
					title: '销量',
				},{
					title: '价格',
				}],
				sort: '', //升序: asc 降序: desc,
				offsetTop: 0,
				bgColor: '#f1f1f1',
			}
		},
		created() {
			// #ifdef MP-WEIXIN
			const sys = uni.getSystemInfoSync();
			this.offsetTop = ((sys.statusBarHeight + 48) * (750 / sys.windowWidth)); //将px换算成rpx
			// #endif
		},
		methods: {
			handleExchangeTag(index) {
				this.currentIndex = index;
				this.$emit('exchangeTag', index);
				if(this.currentIndex == 0 || this.currentIndex == 1){
					this.sort = '';
					return;
				}
				if (this.currentIndex == 2) {
				  this.sort = this.sort != 'asc' ? 'asc' : 'desc';
				  return;
				}
			},
			handleFixed(){
				this.bgColor = '#ffffff';
			},
			handleUnfixed(){
				this.bgColor = '#f1f1f1';
			}
		}
	}
</script>

<style lang="scss">
	.filter-bar-container{
		z-index: 999;
		.filter-bar{
			display: flex;
			padding: 20rpx 0;
			.filter-item{
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				.filter-icon{
					display: flex;
					flex-direction: column;
					justify-content: center;
					margin-left: 5rpx;
				}
			}
		}
	}

.activity{
	color: var(--bgColor);
	font-weight: bold;
}
</style>