小程序顶部导航自定义颜色设置 · 预约上门操作教程

# 一、使用工具渐变色参考：[https://uigradients.com/#Wiretap](https://uigradients.com/#Wiretap) # 二、效果演示设置效果(一) ![](https://img.kancloud.cn/80/ce/80ce8e8269d3e9ba2677eb79729cef76_411x511.png) 设置效果(二) ![](https://img.kancloud.cn/72/86/7286c94b470d9c15e61571073764b29f_414x509.png) # 三、设置方法 2、点击参数设置可以看到 “顶部导航渐变色左侧颜色”、“顶部导航渐变色右侧颜色”、“顶部导航文本颜色” 三个选项 ![](https://img.kancloud.cn/c8/7d/c87d69ea8870327c0bede78d730c99e5_1123x643.png) 3、点击 “顶部导航渐变色左侧颜色” 选择想要的颜色代码或者输入想设置的渐变色左侧代码号，如我们此处输入 #f953c6 ，点后点击确认 4、点击 “顶部导航渐变色左侧颜色” 选择想要的颜色代码或者输入想设置的渐变色左侧代码号，如我们此处输入 #b91d73 ，点后点击确认 5、“顶部导航文本颜色” 我们默认为白色代码 #FFFFFF 6、点击提交按钮，然后预览小程序效果如下 ![](https://img.kancloud.cn/b8/45/b845d4d3709e8c3c97cbd7ce5c044d07_414x526.png) 7、如果想设置单一颜色，将“顶部导航渐变色左侧颜色”、“顶部导航渐变色右侧颜色”设置为相同的即可，如我们设置成红色代码 #FF0000 ![](https://img.kancloud.cn/2e/a3/2ea3a092aaf48cfe020de7a99d26c934_372x128.png) 8、效果如下 ![](https://img.kancloud.cn/22/e4/22e44405107ce0e3b0033013cb2f483c_414x521.png) 9、顶部颜色设置 ![](https://img.kancloud.cn/ed/53/ed538f3ecf9686eb7e169abf60f065e1_990x669.png) 10、效果如下 ![](https://img.kancloud.cn/f9/18/f91833c1baecf4e8727f181410ec4efd_414x476.png)