微信小程序开发之自定义头部

编辑:睿儿发表于:2020-07-31 19:33:15 32 次阅读

每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。文件内容为一个 JSON 对象,navigationStyle使页面可以自定义头部。

image.png

官方文档地址: 

https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html


在JSON中配置了 

"navigationStyle":"custom"

之后我们就可以使用自定义头部了。它其实是把微信默认的头部给取消了。我们自已写一个顶部,或者你不想写直接写内容也是可以的。

最终效果如图:我自已写了一个顶部,放了个LOGO  然后写了个背景。应用的时候可以发现,如果是整屏背景的话就需要把默认头部取消掉。

这样的话昨天看的那些案例各式各样的头部也不是问题 了。

写背景的时候发现一个问题 ,wxss不支持本地图片,所以只能用网络地址当图片背景或者使用

使用图片的base64格式  background-image: url(?library/202007/"data:image/jpg;base64,/9j/4QMZR...");【我直接使用网络地址了,这个没亲试。不过应该也是没问题的。】

image.png

原文地址:/library/202007/19.html(张家口导航-睿儿知识库)

张家口睿儿网络科技有限公司版权所有