admin 管理员组

文章数量: 1184232

微信小程

微信小程序—自定义头部方案

做微信小程序已经有一定时间了，在某种意义上编程思维有众多相通之处，择一窗而登堂入室，是我们技术人大多数的经历，所以后面主要记录具有微信特色的一些优秀解决方案，至于基础的微信开发，除了看文档，并无任何捷径

配置自定义头部

小程序页面都会有默认的头部，无需配置，但是要满足丰富的业务需求，就要把代码/配置都掌握在自己手中，首先，我们去掉默认头部

"navigationStyle": "custom"
//在app.json中会全局设置，单页面设置在index.json即可
自定义组件头部

直接使用现有框架的头部组件即可，这里推荐使用colorUI的头部组件，colorUI里面的头部组件在其components中，一般使用colorUI会直接引入整个colorUI,这个库还是非常方便的
在usingComponents中使用这个/colorui/components/cu-custom
在wxml页面使用即可

<cu-custom bgColor="bg-white" isBack="{{ true }}"><view slot="backText" bindtap="navigatorBack">返回</view><view slot="content">标题</view>
</cu-custom>

需要注意的是到这里我们还需要做一步处理：动态头高度适配

动态头高度适配

不管是使用colorUI的还是自己写头部，最重要的就是动态头高度适配，以适配不同的机型和屏幕，其实很简单，使用getSystemInfo拿到statusBarHeight

wx.getSystemInfo({success: (e) => {this.globalData.StatusBar = e.statusBarHeight;let capsule = wx.getMenuButtonBoundingClientRect();if (capsule) {this.globalData.Custom = capsule;this.globalData.CustomBar =capsule.bottom + capsule.top - e.statusBarHeight;} else {this.globalData.CustomBar = e.statusBarHeight + 50;}},});

这一块代码可以直接复制到app.js里面即可，原理就是拿到状态栏高度和胶囊按钮的高度

这一篇就到这里，以一个简单的部分切入

本文标签： 微信小程

版权声明：本文标题：微信小程 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1699146959a333023.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。