实现可以露出下一张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;}}// 这里开始是关键，上												


											

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

    
								
  1. 教你解决Taro微信小程序中使用Echarts体积过大的问题
		
    教你解决Taro微信小程序中使用Echarts体积过大的问题 背景 为什么选择Echarts? 单包超过2M,如何处理? 以为到此就结束了? 最后 背景 近期笔者在使用Taro进行微信小程序开发,当引 ...
    
		
    2. 
						
  2. Taro -- 微信小程序登录
		
    Taro微信小程序登录 1.调用Taro.login()获取登录凭证code: 2.调用Taro.request()将code传到服务器: 3.服务器端调用微信登录校验接口(appid+appsecr ...
    
		
    3. 
						
  3. 微信小程序服务器支付sdk,微信小程序之支付后如何调用SDK的异步通知
		
    微信小程序之支付后如何调用SDK的异步通知 发布时间:2021-07-05 10:47:33 来源:亿速云 阅读:57 作者:小新 这篇文章主要介绍微信小程序之支付后如何调用SDK的异步通知,文中介绍 ...
    
		
    4. 
						
  4. 微信小程序键盘弹起后页面上推问题
		
    微信小程序键盘弹起后页面上推问题 小程序的 input 组件聚焦后弹起键盘,自动通过页面上移的方式将输入框所在位置定位到键盘上方. 如果输入框本身就位于页面顶端,则不会造成上推. 但是,如果输入框是位 ...
    
		
    5. 
						
  5. 微信小程序上传后 进行性手机扫码阅览 发现白屏的解决
		
    目录 问题: 微信小程序上传后 进行性手机扫码阅览 发现白屏的解决 1.上传时没有勾选保护 2.请求的域名没有配置 问题: 微信小程序上传后 进行性手机扫码阅览 发现白屏的解决 1.上传时没有勾选保护 ...
    
		
    6. 
						
  6. 小程序上传音频失败_微信小程序实现录音后上传文件方法详细
		
    本篇文章讲述了微信小程序实现录音后上传文件方法,大家对微信小程序实现录音后上传文件方法不了解的话或者对微信小程序实现录音后上传文件方法感兴趣的话那么我们就一起来看看本篇文章吧, 好了废话少说进入正题吧 ...
    
		
    7. 
						
  7. Taro微信小程序字体引入
		
    Taro微信小程序要引入新的字体可以全局引入,在app.jsx的componentDidMount中使用Taro.loadFontFace 注意: source的下载地址只能使用经过备份的域名 运行时 ...
    
		
    8. 
						
  8. 微信小程序手把手教你实现类似Android中ViewPager控件效果
		
    微信小程序手把手教你实现类似Android中ViewPager控件效果 前言 需求分析 头部TAB 滑动的内容部分 最终版本 尾巴 前言 在做Android开发的时候,ViewPager是开发者使用频 ...
    
		
    9. 
						
  9. 微信小程序地图组件和相机组件实现基于location的AR效果的尝试（失败）
		
    微信小程序地图组件和相机组件实现基于location的AR效果的尝试(失败) 最近无论AR还是微信小程序都是炒的火热.微信小程序的特点便是"无需安装,用完即走",而我们所说的AR用 ...
    
		
    10. 
		


					

最新文章
	

    
						
  1. Windows Server 2012R2 DHCP故障转移(3)
		
    2. 
						
  2. （4）关于Alpha通道问题
		
    3. 
						
  3. spring web参数传递
		
    4. 
						
  4. 前端开发需要掌握的SEO的知识点
		
    5. 
						
  5. IDEA之过滤那些不重要的文件
		
    6. 
						
  6. spring boot mybatis拦截器
		
    7. 
						
  7. 联想sr950配置raid卡_联想ThinkServerrd服务器raid卡设置教程LSIiraid卡设置教程
		
    8. 
						
  8. har文件解析工具_嵌入式MCU也能跑AI？STM32 Cube.AI工具包使用初探
		
    9. 
						
  9. 【内网渗透】找到内网关键节点
		
    10. 
						
  10. Mysql设置允许外网访问（图文）
		
    11. 
						
  11. nginx反代web页面没有正常显示_web漏洞-SSI注入漏洞深入详解
		
    12. 
						
  12. 江浙沪地区计算机考研高效排名,京津冀，江浙沪地区院校盘点！
		
    13. 
						
  13. JetLinks 物联网基础平台 1.6 RELEASE 发布
		
    14. 
						
  14. iOS字体(UIFont)的相关知识
		
    15. 
						
  15. 【已解决】解锁小米6的时候,卡在当前未连接手机怎么办?
		
    16. 
						
  16. Hyperscan Windows 编译指南
		
    17. 
						
  17. Echarts源码修改
		
    18. 
						
  18. 一份来自28岁老程序员的自白
		
    19. 
						
  19. 电脑系统安装后桌面图标隔开很宽怎么调？
		
    20. 
						
  20. Illumina测序原理
		
    21. 
		

	


热门文章
	

    
									
  1. Codec2Client::createComponent过程分析
			
    2. 
						
  2. WSAStartup( )详解
			
    3. 
						
  3. java：生成中文姓名（区分男女）
			
    4. 
						
  4. java获取输入和运用scanner
			
    5. 
						
  5. Android 9.0去除Activity跳转动画
			
    6. 
						
  6. vsCode JS代码格式化插件ESlint
			
    7. 
						
  7. RK3399 HDC适配
			
    8. 
						
  8. xml教程之dtd约束
			
    9. 
						
  9. C# 無法載入 DLL ‘UsbDll.dll‘: 找不到指定的模組。 (發生例外狀況於 HRESULT: 0x8007007E)”
			
    10. 
						
  10. 如何调试正在运行的python程序_如何调试作为服务运行的Python程序？
			
    11.