用户体验的重要性,温州 网站优化,电商网站代码设计,可以做网站的公司需求在tabbar的图标右侧显示和隐藏小圆点。一般表示有新消息、新更新。基本代码序号从0开始计算。uni.showTabBarRedDot({index:1});uni.hideTabBarRedDot({index:1});修改代码App.vue或index页在App.vue的onLaunch周期或者是index页的onLoad加入代码#xff0c;判定是否需要显…需求在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里直接无脑隐藏红点。可能改变红点的页面在任何可能改变红点的代码的末尾都要加上判定确定是否显示红点。
