需求
在tabbar的图标右侧显示和隐藏小圆点。一般表示有新消息、新更新。
基本代码
序号从0开始计算。
uni.showTabBarRedDot({index:1});
uni.hideTabBarRedDot({index:1});
修改代码
App.vue或index页
在App.vue的onLaunch
周期或者是index页的onLoad
加入代码,判定是否需要显示红点。
如果index页跟消息完全无关,那么尽量写在App.vue而不要写在index页。为啥?因为uni.showTabBarRedDot({index:1});
跟具体页面的data
和业务逻辑无关,跟index页也没有必然关系,而且消息页往往是第2个或第3个tabbar页,并不是index页。如果index页右上角也要加个新消息红点,那么当然要加在index页。
现在,在onLaunch
(或index页的onLoad
)加代码有2种做法,我们假设除了请求新消息,还有一些其他的请求有必要放到onLaunch
(或index页的onLoad
)里,这里一并讨论。
第一种做法,先判断会员是否登录(下面两项并发执行):
- Promise.all(若干个影响UI布局的访客请求) -> Promise.all(若干个不影响UI布局的访客请求)
- isLogin() -> yes -> Promise.all(若干个影响UI布局的会员请求) -> Promise.all(若干个不影响UI布局的会员请求) -> 新消息请求的回调:确定显示或不显示红点
第二种,不判断是否登录(下面两项并发执行):
- Promise.all(若干个影响UI布局的访客请求) -> Promise.all(若干个不影响UI布局的访客请求)
- Promise.all(若干个影响UI布局的会员请求) -> Promise.all(若干个不影响UI布局的会员请求) -> 新消息请求的回调:确定显示或不显示红点
如果不判断是否登录,则可能登录过期,这就导致,首先,浪费了线程和流量去请求数据,其次,如果axios拦截器设定拦截401错误并跳转到登录页,那么,上述的若干个影响UI布局的会员请求就必须加入拦截器里的白名单,也就是说,必须保证它们即使401也不跳转到登录页。
你的项目具体用哪种做法,都行。
处理登入、登出代码的success回调
登入代码的success回调里需同样请求一遍新消息数量,这回一定能请求到,不会fail,不多说。
登出代码的success里直接无脑隐藏红点。
可能改变红点的页面
在任何可能改变红点的代码的末尾都要加上判定,确定是否显示红点。