微信小程序自定义tabbar,页面切换存在闪动【解决方案】

需求:

自定义tabbar,在需要的几个主页面都加入这么一个组件,但是有个情况;而组件中使用照片(svg或png)和文字;在切换tabbar的时候,跳转相应的页面,运行到真机或是模拟器,会存在图片闪动,而文字不会闪动;并且tabbar的图标颜色可以自定义。

图标颜色+tabbar切换不闪动  

解决方案一:使用svg 转为base64,在更改颜色

代码块如下  https://developers.weixin.qq.com/s/GrQhtZmg7yCJ

代码如下 svg是组件,参考上方的代码块

<van-tabbar-item name="raceHome"><svg slot="icon-active" color="{{raceColor}}" src="/images/icon-home-active.svg" width="{{iconW}}px" height="{{iconW}}px" /><svg slot="icon" color="#000" src="/images/icon-home-inactive.svg" width="{{iconW}}px" height="{{iconW}}px" />首页</van-tabbar-item>

但是tabbar切换还是存在闪动

解决方案二:使用iconfont 字体图标【推荐】

微信小程序引入iconfont

代码如下:

<van-tabbar-item name="raceHome"><text slot="icon-active"  class="iconfont icon-home-active tab-text" style="color:{{raceColor}};"></text><text slot="icon"  class="iconfont icon-home-inactive tab-text"  ></text>首页</van-tabbar-item>

测试完之后,虽然有小闪动,整体效果 可以打70分

方案三:就是将这几个页面封装为组件,在一个页面进行交互;目前没有这样处理

分析,使用照片和svg为啥会有闪动呢?主要是在切换到下一个页面的时候,tabbar组件又再一次加载了对应的资源,而资源加载耗费一定的时间,从而产生啦闪动效果;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/803739.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Docker搭建Nginx+keepalived高可用负载均衡服务器

一、背景 1.nginx高可用 在生产环境下&#xff0c;Nginx作为流量的入口&#xff0c;如果Nginx不能正常工作或服务器宕机&#xff0c;将导致整个微服务架构的不可用。所以负责负载均衡、反向代理的服务&#xff08;Nginx&#xff09;为了提高处理性能&#xff0c;高可用&#…

python-pytorch NLP中处理中文的步骤0.5.002

python-pytorch NLP中处理中文的步骤0.5.001 1. 导入包2. 准备停用词3. 把需要处理的文本切词4. 将切的词放入list中5. 获取vocab、vocab_size6. 获取word_to_idx、idx_to_word7. 告一段落8. 其他&#xff08;1800的停用词&#xff09; 1. 导入包 import jieba import torch i…

Go —— channel (二)

一个空的 channel 会产生哪些问题 读写nil管道均会阻塞触发死锁。关闭的管道仍然可以读取数据&#xff0c;向关闭的管道写数据会触发panic。 问&#xff1a;如果有多个协程同时读取一个channel&#xff0c;channel会如何选择消费者 channel 会按照维护的 recvq 等待读消息的…

239. 奇偶游戏(带权值并查集,邻域并查集,《算法竞赛进阶指南》)

239. 奇偶游戏 - AcWing题库 小 A 和小 B 在玩一个游戏。 首先&#xff0c;小 A 写了一个由 0 和 1 组成的序列 S&#xff0c;长度为 N。 然后&#xff0c;小 B 向小 A 提出了 M 个问题。 在每个问题中&#xff0c;小 B 指定两个数 l 和 r&#xff0c;小 A 回答 S[l∼r] 中…

苍穹外卖11(Apache ECharts前端统计,营业额统计,用户统计,订单统计,销量排名Top10)

目录 一、Apache ECharts【前端】 1. 介绍 2. 入门案例 二、营业额统计 1. 需求分析和设计 1 产品原型 2 业务规则 3 接口设计 2. 代码开发 3. 功能测试 三、用户统计 1. 需求分析和设计 1 产品原型 2 业务规则 3 接口设计 2. 代码开发 3. 功能测试 四、订单统…

0.开篇:SSM+Spring Boot导学

1. 为什么要使用框架 Spring是一个轻量级Java开发框架&#xff0c;最早有Rod Johnson创建&#xff0c;目的是为了解决企业级应用开发的业务逻辑层和其他各层的耦合问题。 几乎当下所有企业级JavaEE开发都离不开SSM&#xff08;Spring SpringMVC MyBatis&#xff09;Spring B…

什么是企业邮箱?如何选择合适的企业邮箱?

企业邮箱和个人邮箱不同&#xff0c;它的邮箱后缀是企业自己的域名。企业邮箱供应商一般都提供手机app、桌面端、web浏览器访问等邮箱使用途径。那么什么是企业邮箱&#xff1f;如何选择合适的企业邮箱&#xff1f;好用的企业邮箱应具备无缝迁移、协作、多邮箱管理等功能。 企…

【hive】单节点搭建hadoop和hive

一、背景 需要使用hive远程debug&#xff0c;尝试使用无hadoop部署hive方式一直失败&#xff0c;无果&#xff0c;还是使用有hadoop方式。最终查看linux内存占用6GB&#xff0c;还在后台运行docker的mysql(bitnami/mysql:8.0)&#xff0c;基本满意。 版本选择&#xff1a; &a…

全面深入学习Java中的字符串类

二、字符串类 &#xff08;一&#xff09;String String&#xff1a;字符串 concat() --- 在末尾追加字符串&#xff0c;返回新的字符串 substring(int begindex) --- 从指定下标处截取到字符串末尾&#xff0c;并返回新的字符串 substring(int begindex,endindex) --- 从开始…

OceanBase 中一个关于 NOT IN 子查询的 SQL 优化案例

通过一个案例了解 not in 对 NULL 值敏感的处理逻辑和优化方法。 作者&#xff1a;胡呈清&#xff0c;爱可生 DBA 团队成员&#xff0c;擅长故障分析、性能优化&#xff0c;个人博客&#xff1a;[简书 | 轻松的鱼]&#xff0c;欢迎讨论。 爱可生开源社区出品&#xff0c;原创内…

Linux中账号登陆报错access denied

“Access denied” 是一个权限拒绝的错误提示&#xff0c;意味着用户无法获得所请求资源的访问权限。出现 “Access denied” 错误的原因可以有多种可能性&#xff0c;包括以下几种常见原因&#xff1a; 错误的用户名或密码&#xff1a;输入的用户名或密码不正确&#xff0c;导…

机器学习—1.快速入门

机器学习步骤 确定与问题相关的输入&#xff08;明确输入&#xff09;收集与问题相关的数据&#xff08;数据准备&#xff0c;学&#xff09;分析预测结果的类型&#xff08;分类&#xff1f;回归&#xff1f;是判断题还是应用题&#xff09;根据预测记过的类型&#xff0c;选…

http添加SSL证书后打开变成另外一个网站是怎么回事

当在使用http的网站上添加了SSL证书后&#xff0c;如果打开该网站时出现了另外一个网站&#xff0c;可能是由以下几种情况引起的&#xff1a; 错误的证书配置 证书配置可能存在错误&#xff0c;导致SSL连接时服务器返回了错误的证书&#xff0c;或者证书与网站域名不匹配。这…

MySQL-系统及自定义变量

详情系统变量信息参考MySQL官方文档 系统变量分类&#xff1a; 全局系统变量&#xff08;global&#xff09; 全局系统变量针对于所有会话&#xff08;连接&#xff09;有效&#xff0c;但 不能跨重启 会话系统变量&#xff08;session&#xff09; 仅针对当前连接有效&am…

STM32-模数转化器

ADC(Analog-to-Digital Converter) 指模数转换器。是指将连续变化的模拟信号转换 为离散的数字信号的器件。 ADC相关参数说明&#xff1a; 分辨率&#xff1a; 分辨率以二进制&#xff08;或十进制&#xff09;数的位数来表示&#xff0c;一般有 8 位、10 位、12 位、16 位…

Transformer模型-decoder解码器,target mask目标掩码的简明介绍

今天介绍transformer模型的decoder解码器&#xff0c;target mask目标掩码 背景 解码器层是对前面文章中提到的子层的包装器。它接受位置嵌入的目标序列&#xff0c;并将它们通过带掩码的多头注意力机制传递。使用掩码是为了防止解码器查看序列中的下一个标记。它迫使模型仅使用…

WPF 多语言切换及ResourceDictionary的Source路径填写

WPF 多语言切换 1. 添加资源字典 新增两个资源字典&#xff0c;里面分别存储不同语言的文本 <ResourceDictionary xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x"http://schemas.microsoft.com/winfx/2006/xaml" xmlns:s…

DRBD双主模式自动化安装部署脚本

DRBD&#xff08;Distributed Replicated Block Device&#xff09;是一种分布式存储系统&#xff0c;它允许在网络中的两个或多个节点之间复制数据。在本例中&#xff0c;我们为两个节点&#xff08;node1和node2&#xff09;设置DRBD&#xff0c;使其运行在双主模式下。 注意…

使用API有效率地管理Dynadot域名,确认域名转移流程状态

关于Dynadot Dynadot是通过ICANN认证的域名注册商&#xff0c;自2002年成立以来&#xff0c;服务于全球108个国家和地区的客户&#xff0c;为数以万计的客户提供简洁&#xff0c;优惠&#xff0c;安全的域名注册以及管理服务。 Dynadot平台操作教程索引&#xff08;包括域名邮…

虚拟网络设备与网络安全:深入分析与实践应用

在数字化时代&#x1f4f2;&#xff0c;网络安全&#x1f512;成为了企业和个人防御体系中不可或缺的一部分。随着网络攻击的日益复杂和频繁&#x1f525;&#xff0c;传统的物理网络安全措施已经无法满足快速发展的需求。虚拟网络设备&#x1f5a7;&#xff0c;作为网络架构中…