小程序顶部导航自定义颜色设置 · 家政小程序-教程

# 一、使用工具渐变色参考：[https://uigradients.com/#Wiretap](https://uigradients.com/#Wiretap) # 二、效果演示设置效果(一) ![](https://img.kancloud.cn/f3/31/f331c5eab44014e20403c2ec5d5e451f_435x383.png) 设置效果(二) ![](https://img.kancloud.cn/a6/57/a657db5de61c56ddb1298c0b46ed04e1_419x337.png) # 三、设置方法 1、将小程序升级到3.9.34版本以上/ 2、点击参数设置可以看到 “顶部导航渐变色左侧颜色”、“顶部导航渐变色右侧颜色”、“顶部导航文本颜色” 三个选项 ![](https://img.kancloud.cn/4c/8a/4c8a7106e0672eca596c388f18b2f98a_708x208.png) 3、点击 “顶部导航渐变色左侧颜色” 选择想要的颜色代码或者输入想设置的渐变色左侧代码号，如我们此处输入 #f953c6 ，点后点击确认 4、点击 “顶部导航渐变色左侧颜色” 选择想要的颜色代码或者输入想设置的渐变色左侧代码号，如我们此处输入 #b91d73 ，点后点击确认 5、“顶部导航文本颜色” 我们默认为白色代码 #FFFFFF 6、点击提交按钮，然后预览小程序效果如下 ![](https://img.kancloud.cn/f6/09/f6092acd3ad835b97c542e44acd91080_571x590.png) 7、如果想设置单一颜色，将“顶部导航渐变色左侧颜色”、“顶部导航渐变色右侧颜色”设置为相同的即可，如我们设置成红色代码 #FF0000 ![](https://img.kancloud.cn/1d/d2/1dd27e658783cb0bde0a828e2d0b5447_708x296.png) 8、效果如下 ![](https://img.kancloud.cn/37/a9/37a93565b66b31cab085d38e7f0ee958_708x487.png) 9、顶部颜色设置 ![](https://img.kancloud.cn/77/12/77128ba8c66ac31e9c5ca63b60a8e19a_708x541.png) 10、效果如下 ![](https://img.kancloud.cn/a1/41/a141c8a5aabbe05a5690d6fff01e4f66_708x569.png)