Taro +微信小程序实现露出后一项的一小部分的swiper效果

佛天华

已于 2023-03-31 23:34:35 修改

阅读量583

点赞数

分类专栏： H5 文章标签： taro 微信小程序前端

于 2022-11-29 09:50:22 首次发布

本文链接：https://blog.csdn.net/fth1002853070/article/details/128092108

版权

H5 专栏收录该内容

31 篇文章 1 订阅

订阅专栏

在这里插入图片描述

实现可以露出下一张swiper 图一部分的效果

1、vue文件

<template>
	<view
		class="container"
		:style="containerStyle"
	>
		<!-- 头部背景 -->
		<view
			class="fixed-header"
		>
			<NavBar
				titleTxt=""
				:showLeft="false"
				bgColor="transparent"
				textColor="#FFFFFF"
				leftArrowColor="#FFFFFF"
			>
				<template #left>
					<view class="avator flex f-ai-c">
						<image
							class="index-icon"
							:src="`${baseImgHost}/food-tips-icon.png`"
							mode="aspectFill"
						/>
						<text class="fz-24 user-name">
							西门吹雪
						</text>
					</view>
				</template>
			</NavBar>
			<!-- <view></view> -->
			<image
				:src="`${baseImgHost}/index-bg.png`"
				mode="aspectFill"
				class="index-bg"
			/>
		</view>
		<view class="relative-container">
			<BgTitleList
				:tabList="tabList"
				style="margin-top: 50rpx;"
				@bgTitleClick="bgTitleClickHandle"
			/>
			<!-- 菜品列表 -->
			<view class="food-list">
				<text class="fz-24 food-text two-line-words">
					{{ foodList.join('/') }}
				</text>
			</view>
			<!-- 菜品swiper -->
			<swiper
				:indicator-dots="false"
				:duration="500"
				class="swiper-container"
				next-margin="30rpx"
			>
				<block
					v-for="item in dataList"
					:key="item.id"
				>
					<swiper-item>
						<view class="food-swiper">
							<image
								:src="item.food.imgUrl"
								class="food-img"
								mode="aspectFill"
							/>
							<view class="energy-info-group flex f-jc-sb">
								<view class="energy-info flex f-d-c f-ai-c">
									<text class="value">
										{{ (+item.food.heat).toFixed(1) }}
									</text>
									<text class="unit fz-28">
										热量(Kcal)
									</text>
								</view>
								<view class="energy-info flex f-d-c f-ai-c">
									<text class="value">
										{{ (+item.food.protein).toFixed(1) }}
									</text>
									<text class="unit fz-28">
										蛋白质(g)
									</text>
								</view>
								<view class="energy-info flex f-d-c f-ai-c">
									<text class="value">
										{{ (+item.food.fat).toFixed(1) }}
									</text>
									<text class="unit fz-28">
										脂肪(g)
									</text>
								</view>
							</view>
						</view>
					</swiper-item>
				</block>
			</swiper>
		</view>
	</view>
</template>

2.样式

page {
    overflow: scroll;
}
.container {
	padding: 0;
    box-sizing: border-box;
	.fixed-header {
		position: fixed;
		z-index: 99;
		top: 0;
		width: 100vw;
		height: 100vh;
		background: linear-gradient(180deg, #FFF1E3 0%, #FAFAFA 100%);
		.avator {
			.index-icon {
				width: 60rpx;
				height: 60rpx;
				margin-left: 36rpx;
				border-radius: 50%;
			}
			.user-name {
				margin-left: 22rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
			}
		}
		.index-bg {
			width: 100vw;
			height: 332rpx;
		}
	}
	.relative-container {
		position: relative;
		z-index: 99;
		width: 100%;
		padding: 0 64rpx 40rpx;
		box-sizing: border-box;
		.food-list {
			height: 204rpx;
			margin-top: -25rpx;
			margin-bottom: 32rpx;
			box-sizing: border-box;
			padding: 80rpx 190rpx 30rpx 40rpx;
			background-image: url('../../images/canteen-mini/index-food-bg.png');
			background-size: contain;
			.food-text {
				font-family: PingFangSC-Regular, PingFang SC;
				line-height: 2;
				font-weight: 400;
				color: #613A15;
			}
		}
		// 这里开始是关键，上👆面的可以忽略
		.swiper-container {
			// swiper容器的宽度 等于： 100vw - (父padding-left + 父 padding-right) + swiper.next-margin + swiperItem.margin-right
			width: calc(100vw - 128rpx + 30rpx + 30rpx);
			height: 732rpx;
			.food-swiper {
				height: 732rpx;
				margin-right: 30rpx;
				background-color: white;
				border-radius: 20rpx;
				.food-img {
					width: 100%;
					height: 560rpx;
					border-radius: 20rpx;
				}
				.energy-info-group {
					padding: 0 40rpx;
					margin-top: 28rpx;
					box-sizing: border-box;
					.energy-info {
						.value {
							font-size: 44rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: #333333;
						}
						.unit {
							font-family: PingFangSC-Light, PingFang SC;
							font-weight: 300;
							color: #999999;
						}
					}
				}
			}
		}
	}
}