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

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

1、vue文件

<template><viewclass="container":style="containerStyle"><!-- 头部背景 --><viewclass="fixed-header"><NavBartitleTxt="":showLeft="false"bgColor="transparent"textColor="#FFFFFF"leftArrowColor="#FFFFFF"><template #left><view class="avator flex f-ai-c"><imageclass="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"><blockv-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-rightwidth: 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;}}}}}} }

总结

以上是生活随笔为你收集整理的Taro +微信小程序实现 露出后一项的一小部分的swiper效果的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。