由于微信小程序项目使用了自定义顶部和底部导航栏,使用miniprogram-to-uniapp工具转成uniapp后这种报错,ui各种混乱。。。主要原因还是因为微信自定义顶部和底部导航栏不适用uniapp,这可怎么办呢?在此,我建议大家先把自定义导航栏改回原生的,然后转成uniapp后,再使用uniapp的自定义组件去实现自定义顶部和底部导航栏的效果,个人认为只是最快速解决问题的方法。
恢复原生底部导航栏
1、找到app.json文件,去掉"custom": true
"tabBar": {
"color": "#333333",
"selectedColor": "#F37F00",
"borderStyle": "white",
"custom": true,
直接去掉"custom": true,即可
2、删除自定义文件
恢复原生顶部导航栏
1、找到自定义顶部导航栏的页面,打开该页面的.json文件,删除"navigationStyle":"custom"
{
"usingComponents": {
},
"enablePullDownRefresh": true,
"navigationStyle":"custom"
}
直接删掉"navigationStyle":"custom"即可,不要忘记把上一行的‘,’号去掉,不然会报语法错误
2、打开该页面的wxml文件,删除自定义的顶部布局
3、删除自定义主键navBar,当然你的可能不是这个组件。
这个时候页面基本能够全部显示出来了,后面再针对页面的ui去使用uniapp的组件去实现自己想要的效果即可。