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
仔细看下面有一个_uniapppicker.js,用HbuilderX打开搜索uni-picker-header即可找到样式设置位置
搜索uni-picker-action-confirm和uni-picker-action-cancel可分别找到确定按钮和取消按钮位置对样式进行修改
通过hbuilderX运行到手机上可以直接看到修改效果
打包注意事项
注意:因为修改源码所以一定要使用离线打包
本地打包
然后点生成本地打包App资源
然后在用android studio进行打包,具体参考官方文档
通过阅读uniapp源码,笔者推测picker组件是利用webview实现的
这是目前笔者发现app端的解决办法,如果有更好的办法,可以在评论区留言