1. 云期刊首页
  2. 建站教程

萤火小程序商城修改页面顶部背景色及字体颜色的方法

修改个人中心页面顶部背景色及字体颜色

修改页面配置文件

修改前端个人中心页面配置文件,文件路径:pages/user/index.json,navigationBarTitleText为顶部标题,navigationBarBackgroundColor为顶部背景颜色,navigationBarTextStyle为顶部字体颜色。需要注意的是顶部字体颜色的值只能是“write”或“black”。根据需要修改为自己中意的颜色。

{
"navigationBarTitleText": "个人中心",
"navigationBarBackgroundColor":"#ffdd00",
"navigationBarTextStyle": "black"
}

修改页面样式文件

修改前端页面样式文件,文件路径:pages/user/index.wxss,其中background-color 项为背景颜色,可根据需要修改,如果要修改文字颜色,可以添加color项。

.user-header {
display: flex;
padding-top: 1px;
width: 100%;
height: 310rpx;
align-content: center;
background-color: #fd0;
background-repeat: no-repeat;
background-position: center right;
background-size: auto 100%;
}

修改全部分类页面顶部背景色及字体颜色

修改前端页面配置文件,文件路径pages/category/index.json,打开文件后添加”navigationBarBackgroundColor”:”#ffdd00″和”navigationBarTextStyle”: “black”两行代码,根据自己的需要修改颜色即可。

{
"navigationBarTitleText": "全部分类",
"navigationBarBackgroundColor":"#ffdd00",
"navigationBarTextStyle": "black"
}

修改购物车页面顶部背景色及字体颜色

修改前端页面配置文件,文件路径pages/flow/index.json,打开文件后添加”navigationBarBackgroundColor”:”#ffdd00″和”navigationBarTextStyle”: “black”两行代码,根据自己的需要修改颜色即可。

{
"navigationBarTitleText": "购物车",
"navigationBarBackgroundColor":"#ffdd00",
"navigationBarTextStyle": "black"
}

通过上述修改可以发现,单独定义页面顶部标题、背景颜色、字体颜色都在配置文件里面修改,小程序前端的配置文件是json的后缀,前端页面的样式文件后缀为wxss。

本站所有内容,如有版权、侵权等问题,请及时联系本站做删除。发布者:云期刊,转载请注明出处:https://www.yunqikan.cn/5522.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注

问答社区 在线客服
联系我们

QQ 技术:109033286

QQ 运维:3423710838

email 邮箱:drhxxkj@163.com

Qqun QQ交流群:808026766

分享本页
返回顶部