uniapp-商城-26-顶部模块折叠
主要是为了更多展示商品,需要对头部进行折叠。
将客服和后台隐藏不显示,将logo和名称栏目显示到胶囊处,将码 隐藏 将店铺介绍隐藏,将logo缩小,将店名缩小显示。
代码:使用一个tag 来表示需要折叠 这里就是 foldstate
将这里的foldstate 传递到组件 :
组件:获取到该值 :shop headbar 组件
设置到客服:flod
设置到body 就是logo栏目 flod
计算高度变化: flodstate
设置flod的样式,其他没有设置的样式就继承前面设置的:
设置页面折叠的 慢动作: transition 以及注意这里的 img 100% 被继承(就是logo图片完全显示)
没有慢动作 折叠就会显得有些生硬