BiKing/pages/index/modules/market.vue

<template>
	<view class="market-box">

		<gap height="10rpx" />
		<view class="market-tab">
			<view v-for="(item , index) in marketTab"
				:class="['market-tab-item' , index === marketTabIndex ? 'active-tab-item' : '' ]"
				@click.stop="marketTabIndex = index">
				{{ item }}
			</view>
		</view>
		<swiper :duration="150" class="market-content" :style="{'height': scrollHeight + 'px' }" :current="marketTabIndex">
			<swiper-item>
				<scroll-view :style="{'height': scrollHeight + 'px' }" class="market-scroll" scroll-y>
					<!-- <add-optional ref="addOptionalRef" /> -->
					<marketplace ref="optionalRef" :marketplaceList="optional" />
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<scroll-view :style="{'height': scrollHeight + 'px' }" class="market-scroll" scroll-y>
					<marketplace ref="marketplaceRef" :marketplaceList="market" />
				</scroll-view>
			</swiper-item>
		</swiper>

	</view>
</template>
<!-- array.sort(function (x,y) {
      return x-y;
    }); -->
<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		name: "marketModules",
		props: {
			market: {
				type: Array,
				default: () => []
			}
		},

		computed: {
			...mapGetters([
				'PageContentHeight',
				'tabBarHeight'
			]),
		},
		data() {
			return {
				scrollHeight: 0,
				marketTabIndex: 1,
				marketTab: [
					'自选',
					'市场'
				],
				optional:[]
			};
		},

		watch: {
			market:{
				handler(newArr){
					if(newArr && newArr.length > 0){
						this.optional = newArr.slice(0,6)
					}
				},
				immediate:true,
				deep:true
			},
			PageContentHeight: {
				handler(newH) {
					this.scrollHeight = newH - uni.upx2px(114) - uni.upx2px(10) - this.tabBarHeight;
					
				},
				immediate: true
			}
		},
	}
</script>

<style lang="scss" scoped>
	.market-box {
		width: 100%;

		.market-tab {
			padding: 0 $pages-padding ;
			width: 100%;
			height: 114rpx;
			display: flex;
			align-items: center;

			.market-tab-item {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Bold;
				font-weight: 700;
				color: #1a1a1a;
				line-height: 40rpx;
				letter-spacing: 0.6rpx;

				+.market-tab-item {
					margin-left: 50rpx;
				}
			}

			.active-tab-item {
				font-size: 34rpx;
				color: #20B482;
				position: relative;

				&::before {
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					bottom: -20rpx;
					content: '';
					width: 80%;
					height: 3px;
					border-radius: 2px;
					background-color: #20B482;
				}
			}

		}

		.market-content {
			width: 100%;


			.market-scroll {
				width: 100%;
			}
		}
	}
</style>