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

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

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

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

将这里的foldstate 传递到组件 :

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

设置到客服:flod

设置到body 就是logo栏目 flod

计算高度变化: flodstate

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

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

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

相关推荐
小溪彼岸2 小时前
uni-app小白从0开发一款鸿蒙Next应用到上线
uni-app·harmonyos
一颗小青松4 小时前
uniapp app端使用uniCloud的unipush
uni-app
cngm1107 小时前
uniapp+springboot后端跨域以及webview中cookie调试
spring boot·后端·uni-app
iOS阿玮1 天前
“死了么”App荣登付费榜第一名!
uni-app·app·apple
wendycwb1 天前
uni-app 在真机中canvas绘制的元素悬浮,内容不随父组件滚动问题
uni-app
frontend_frank1 天前
脱离 Electron autoUpdater:uni-app跨端更新:Windows+Android统一实现方案
android·前端·javascript·electron·uni-app
三天不学习1 天前
UniApp三端实时通信实战:SignalR在H5、APP、小程序的差异与实现
微信小程序·uni-app·signalr
念你那丝微笑1 天前
uView Plus + Vue3 + TypeScript + UniApp 正确引入 UnoCSS(避坑版)
vue.js·typescript·uni-app
念你那丝微笑1 天前
vue3+ts在uniapp项目中实现自动导入 ref 和 reactive
vue.js·typescript·uni-app
游戏开发爱好者81 天前
如何使用 AppUploader 提交上传 iOS 应用
android·ios·小程序·https·uni-app·iphone·webview