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

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

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

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

将这里的foldstate 传递到组件 :

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

设置到客服:flod

设置到body 就是logo栏目 flod

计算高度变化: flodstate

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

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

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

相关推荐
!win !5 小时前
uni-app项目后台页面数据更新方案
前端·uni-app
编程猪猪侠6 小时前
解决uni-app微信小程序编译报错:unexpected character `1`
微信小程序·小程序·uni-app
2501_915909067 小时前
iOS 签名证书全生命周期实战,从开发到上架的多阶段应用
android·ios·小程序·https·uni-app·iphone·webview
Rudon滨海渔村20 小时前
【懒人教程】如何让uniapp项目在PC大屏中显示移动端的效果 - 统一uniapp项目的PC、平板、手机的样式
uni-app
2501_915918411 天前
iOS 文件管理全流程实战,从开发调试到数据迁移
android·ios·小程序·https·uni-app·iphone·webview
碎像1 天前
uni-app实战教程 从0到1开发 画图软件 (学会画图)
前端·javascript·css·程序人生·uni-app
小徐_23331 天前
uni-app 还在手写请求?alova 帮你全搞定!
前端·uni-app·axios
iOS阿玮1 天前
苹果审核被拒要听劝,能沟通回复解决真的不用改!
uni-app·app·apple
anyup2 天前
🚀 2025 最推荐的 uni-app 技术栈:unibest + uView Pro 高效开发全攻略
前端·vue.js·uni-app
iOS阿玮2 天前
成年人的沟通,不谈钱谈什么?谈感情?
uni-app·app·apple