uniapp 如何修改picker的颜色

H5端

在app.vue下添加如下代码

.uni-picker-container .uni-picker-header{                //picker头部背景色

background-color: $uni-color-pink;

}

.uni-picker-container .uni-picker-action.uni-picker-action-confirm            //picker确定按钮颜色

,.uni-picker-container .uni-picker-action.uni-picker-action-cancel{            //picker取消按钮颜色

color: $uni-text-color-inverse;                                                                    //我在这里时改成同一种颜色，可根据项目需求拆分更改

}

难点来了哦

app端

D:\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\uni-app-plus\template\common

picker源码位置

仔细看下面有一个_uniapppicker.js，用HbuilderX打开搜索uni-picker-header即可找到样式设置位置

uni-picker-header

搜索uni-picker-action-confirm和uni-picker-action-cancel可分别找到确定按钮和取消按钮位置对样式进行修改

uni-picker-action-confirm和uni-picker-action-cancel

通过hbuilderX运行到手机上可以直接看到修改效果

打包注意事项

注意：因为修改源码所以一定要使用离线打包

本地打包

然后点生成本地打包App资源

然后在用android studio进行打包，具体参考官方文档

uniapp Android端本地打包

uniapp Ios端本地打包

通过阅读uniapp源码，笔者推测picker组件是利用webview实现的

这是目前笔者发现app端的解决办法，如果有更好的办法，可以在评论区留言