在uniApp开发中遇到的问题及解决的办法

1、tabbar导航栏问题

在写项目的时候前期需求要求底部导航栏中间部分凸起，样式为一个蓝色的圈圈（发布按钮），而原生的uniapp不支持自定义底部导航栏，于是需要进行自定义修改。
解决方法：
在uniapp官网的插件市场中，根据别人写的插件，使用非原生的方式自行实现底部导航栏和页面跳转（此时pages.json对底部导航栏的功能将不再使用）。
实现原理：
将一个需要跳转的页面写成一个组件，当点击导航栏的时候，去判断自定义的底部导航栏index，不同的index，使不同的组件出现或消失。
优点：
可以方便的对底部导航栏进行自定义，不受原生uniapp的约束。
缺点：
在页面跳转的过程中，加载速度没有原生的快。

 

2、路径跳转出现问题

1、在使用navigator标签还有uni.navigateTo的时候，页面跳转不成功，pages.json中已经注册过相应页面，没有反应。
解决方法：
在路径前边加上 / 而不使用 …/

2、自定义底部导航栏，在页面跳转之后，原来没有返回按钮的页面出现了返回按钮。
解决方法：
将跳转方法改为返回方法，即将uni.navigateTo()改为uni.navigateBack()。

 

3、实现横向滚动问题

使用标签想要实现横向滑动的时候，发现当滑动元素的代码结构不同的时候，会出现样式上下对不齐的情况。
解决方法：
设法将代码结构统一，如果统一不了可以使用一些比较粗暴的方法，比如设置一些元素opacity：0，如果有更好的方法不建议使用粗暴方法。
实现横向滑动条件：使用标签，设置scroll-x = "true"，将需要横向滑动的元素添加css属性white-space: nowrap，必要时，可以添加display: inline-block属性。

 

4、渲染数据，视图不更新问题

在uni-app的项目中，要求动态渲染分类列表数据，由于有一个数据延迟加载的效果，我用了一个大对象包住数组的方式然后循环渲染，结果更新不更新，要到另一个加载的页面触发事件后，之前的效果才出现

这里有两点：

1. 使用this.s e t ( o b j , k e y , 值 ) 或 者 t h i s . set(obj,key,值)或者this.set(obj,key,值)或者this.set(array,index,值),像是处理vue底层监听不到数据变化的解决方式
2. 要用数据嵌套数组，而不是对象包数组，这里不太理解，一般用第一步就可以解决了，如果不行的话就给他转成数组的形式(可能数组更能被监听吧！)

 

5、关于一些语法坑

1. v-if、src中的""里面不要用{{}}
2. 关于this指向问题，一定要合理使用箭头函数