android button 左侧图标比文字大 uniapp tabbar 图标字体

转载

mob6454cc6658d1 2024-07-02 22:18:47

文章标签 tab栏圆点按钮 UI App 拦截器 文章分类 Android 移动开发

需求

在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里直接无脑隐藏红点。