微信小程序自定义头部样式(案例)

最新推荐文章于 2024-07-08 18:03:40 发布

【小白撑伞】

最新推荐文章于 2024-07-08 18:03:40 发布

阅读量1.4k

点赞数 1

分类专栏：微信小程序文章标签：微信小程序小程序微信

本文链接：https://blog.csdn.net/qq_44892120/article/details/121931443

版权

微信小程序专栏收录该内容

17 篇文章 0 订阅

订阅专栏

本文详细介绍了如何在微信小程序中自定义顶部导航栏的样式。通过在`index.wxml`中添加背景图片，`index.wxss`设置样式如固定定位、高度和Z轴层级，以及在`index.json`中配置`navigationStyle`为`custom`和`navigationBarTextStyle`为`white`，实现了全屏背景和白色文字的导航效果。

摘要由CSDN通过智能技术生成

微信小程序自定义头部样式

![在这里插入图片描述](https://img-blog.csdnimg.cn/bd9cb6833cbe4297ac8db8799be8dindex.wxml

index.wxml

<image class="navigation-bg" src="/static/img/bg.jpeg"></image>

index.wxss

.navigation-bg{
    width: 100%;
    height: 200rpx;
    position: fixed;
    top: 0;
    z-index: -999;
}

index.json

{
  "usingComponents": {   
  },
  "navigationStyle":"custom",
  "navigationBarTextStyle":"white"
}

【小白撑伞】

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
微信小程序自定义头部样式(案例)

微信小程序自定义头部样式index.wxml<image class="navigation-bg" src="/static/img/bg.jpeg"></image>index.wxss.navigation-bg{ width: 100%; height: 200rpx; position: fixed; top: 0; z-index: -999;}index.json{ "usingComponents": {
复制链接

扫一扫

专栏目录