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

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

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

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

将这里的foldstate 传递到组件 :

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

设置到客服:flod

设置到body 就是logo栏目 flod

计算高度变化: flodstate

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

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

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

相关推荐
半兽先生7 分钟前
uniapp微信小程序视频实时流+pc端预览方案
微信小程序·uni-app·音视频
胡斌附体10 小时前
uniapp路由跳转toolbar页面
小程序·uni-app·switch·路由·type·uview-ui
阿諪諪11 小时前
在VSCode中开发一个uni-app项目
ide·vscode·uni-app
发现你走远了12 小时前
『uniapp』把接口的内容下载为txt本地保存 / 读取本地保存的txt文件内容(详细图文注释)
开发语言·javascript·uni-app·持久化保存
lqj_本人12 小时前
鸿蒙OS&UniApp结合机器学习打造智能图像分类应用:HarmonyOS实践指南#三方框架 #Uniapp
机器学习·uni-app·harmonyos
iOS阿玮15 小时前
苹果审核被拒4.1-Copycats过审技巧实操
uni-app·app·apple
加油乐17 小时前
uniapp开发微信小程序---分包
前端·微信小程序·uni-app
前端赵哈哈18 小时前
允许“HBuilder”拨打电 话和管理通话吗?
前端·uni-app
疯狂的沙粒1 天前
uniapp 开发企业微信小程序,如何区别生产环境和测试环境?来处理不同的服务请求
微信小程序·uni-app·notepad++
知兀1 天前
【黑马程序员uniapp】项目配置、请求函数封装
uni-app