uniapp-商城-26-顶部模块折叠

主要是为了更多展示商品,需要对头部进行折叠。

将客服和后台隐藏不显示,将logo和名称栏目显示到胶囊处,将码 隐藏 将店铺介绍隐藏,将logo缩小,将店名缩小显示。

代码:使用一个tag 来表示需要折叠 这里就是 foldstate

将这里的foldstate 传递到组件 :

组件:获取到该值 :shop headbar 组件

设置到客服:flod

设置到body 就是logo栏目 flod

计算高度变化: flodstate

设置flod的样式,其他没有设置的样式就继承前面设置的:

设置页面折叠的 慢动作: transition 以及注意这里的 img 100% 被继承(就是logo图片完全显示)

没有慢动作 折叠就会显得有些生硬

相关推荐
我爱写代码i26 分钟前
AI对话绘画数字人源码 - uniapp前端
前端·人工智能·uni-app
ModyQyW1 小时前
vite-plugin-uni-pages 更新了什么
前端·uni-app
2501_915918419 小时前
Flutter项目配置iOS混淆的详细步骤与工具推荐
android·flutter·ios·小程序·uni-app·cocoa·iphone
梦曦i9 小时前
create-uni-app v1.2.0:交互体验优化
前端·uni-app
lhldsg1 天前
智慧场馆解决方案小程序开发实战:从架构设计到部署指南
java·小程序·uni-app
skiyee1 天前
🚀 用 17 行代码给 UniApp 加上全局登录拦截
前端·uni-app
Mark108591 天前
【踩坑】Uni-app微信小程序自定义组件在 Flex 布局中未铺满整行
微信小程序·小程序·uni-app
梦曦i1 天前
create-uni-app v1.1.0:结构化生成,工程骨架更规范
前端·uni-app
2501_916007472 天前
Flutter与游戏App加固避坑指南:如何为混合开发与高交互应用选对安全方案?
安全·flutter·游戏·ios·小程序·uni-app·iphone
PedroQue992 天前
@meng-xi/create-uni-app v1.0.0 正式发布
前端·uni-app