guosen-ldt-client/pages/consume/comps/tabsSwiper.vue

<template>

	<!-- 选项卡列表 swiper高度自适应 -->
	<view class="">
		<view class="ads">
			<image src="https://music.nanyue6688.com/obsfile/e47815d1738640a09655b12efa4f59a9-%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20210705182001.png"></image>
		</view>
		<view class="tabsSwiper" style="position: relative;top: -150rpx;">
			<!-- <view class="location">
				<u-icon name="map-fill" color="#000"></u-icon>
				<text>保利中心</text>
				<u-icon name="arrow-down-fill" size="20"></u-icon>
			</view> -->
			<view class="search-form" @click="$jump('/pages/search/search')">
				<text class="cuIcon-search"></text>
				<text class="margin-left-20">请输入搜索内容</text>
			</view>
			<view class="tabs">
				<view class="tabs-con" :class="activeIndex==0?'active active0':'in_active in_active0'"
					@click="tabsChange(0)" :style="{ color: activeIndex == 0 ? activeColor : '' }">
					<view class="title">附近优惠</view>
				</view>
				<view class="tabs-con" :class="activeIndex==1?'active active1':'in_active in_active1'"
					@click="tabsChange(1)" :style="{ color: activeIndex == 1 ? activeColor : '' }">
					<view class="title">
						<text>线上</text>
						<text>/</text>
						<text>线下</text>
						场景
					</view>
				</view>

			</view>
			<view class="list">
				<swiper :style="{ height: swiperHeight + 'rpx' }" :current="swiperCurrent" @change="swiperChange">
					<swiper-item style="height: 100%">
						<view class="list0">
							<view class="item">
								<slot name="swiper1">

								</slot>
							</view>
						</view>
					</swiper-item>
					<swiper-item style="height: 100%">
						<view class="list1">
							<view class="item">
								<slot name="swiper2">

								</slot>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "tabsSwiper",
		props: {
			activeColor: {
				type: String,
				default: "#ff9420",
			},
		},
		data() {
			return {
				activeIndex: 0, // tabs索引
				swiperCurrent: 0, // swiper索引
				swiperHeight: 0, //swiper高度
			};
		},
		mounted() {
			this.initSwiperHeight(".list0");
		},
		methods: {
			// 点击tabs
			tabsChange(index) {
				this.activeIndex = index;
				this.swiperCurrent = index;
				let list = ".list" + index;
				this.initSwiperHeight(list);
				this.$emit('currentChange',index)
			},
			// 点击商品
			touchItem(goods, cur) {
				this.$emit("touchItem", goods);
			},
			// 手势切换
			swiperChange(e) {
				let index=e.detail.current
				this.activeIndex = index;
				let list = ".list" + index;
				this.initSwiperHeight(list);
				this.$emit('currentChange',index)
			},
			// 计算高度
			initSwiperHeight(list) {
				const query = uni.createSelectorQuery().in(this);
				this.$nextTick(() => {
					query
						.select(list)
						.boundingClientRect((data) => {
							this.swiperHeight = Math.ceil(data.height / (uni.upx2px(data.height) / data
								.height));
						})
						.exec();
				});
			},
		},
	};
</script>

<style lang="scss">
	.ads {
		image{
			width: 100%;
			height: 450rpx;
		}
	}
	
	.location{
		font-weight: 800;
		font-size: 30rpx;
		display: flex;
		padding:20rpx 30rpx;
		
		text{
			margin: 0 4rpx;
		}
	}

	.search-form {
		background-color: #FFFFFF;
		border-radius: 50rpx;
		height: 60rpx;
		margin-bottom: 16rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding-left: 40rpx;
		color: #b9b9b9;
		font-size: 26rpx;
	}

	.tabsSwiper {
		padding: 14rpx;
	}

	.tabs {
		display: flex;
		width: 100%;

		.tabs-con {
			padding: 20rpx 0;
			color: #333;
			overflow: hidden;
			display: flex;
			justify-content: center;
			align-items: center;

			.des {
				font-size: 20rpx;
				width: 100%;
			}
		}
	}

	.active {
		width: 60%;
		z-index: 9;
		border-radius: 20rpx 20rpx 0 0;

		.title {
			font-weight: 800;
			font-size: 34rpx;
			color: #ff9420;
		}
	}

	.active0 {
		background: linear-gradient(-110deg, transparent 40rpx, #ffffff 0) top right;
	}

	.active1 {
		background: linear-gradient(120deg, transparent 60rpx, #ffffff 0) top left;
	}

	.in_active {
		width: 70%;
		margin-top: 14rpx;
		background-color: #fedcc3;
	}

	.in_active0 {
		margin-right: -100rpx;
		border-radius: 20rpx 0 0 0;
		background-color: #fedcc3;
	}

	.in_active1 {
		margin-left: -100rpx;
		border-radius: 0 20rpx 0 0;
		background-color: #fedcc3;
	}

	.list {
		background-color: #fefefe;
		padding: 16rpx;
		border-radius: 0 0 16rpx 16rpx;
		overflow: hidden;
		min-height: 100rpx;
	}
</style>