解决微信小程序 自定义tabBar 切换时候闪烁问题
这个闪烁真的很迷
我搜了一些资料,进行了以下步骤的操作
第一种解决办法 ,把tabbar自定义组件的this.setData中的代码注释掉

显示tabbar中的页面中,添加下面的:这个好像没什么用啊

第二种方法:把cover-view标签,全部替换成view标签,cover-image也换成icon

我直接上代码,上面是原本的代码,下面是新代码
custom-tab-bar/index.wxml
<!--miniprogram/custom-tab-bar/index.wxml-->
<!-- <cover-view class="tab-bar">
<cover-view class="tab-bar-border"></cover-view>
<cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
<cover-image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
<cover-view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view>
</cover-view>
</cover-view> -->
<!--miniprogram/custom-tab-bar/index.wxml-->
<view class="tab-bar">
<view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
<view class="iconfont {{item.icon}}" style="{{selected === index ? 'color: #2a5ceb' : '#ccc'}}">
<van-icon name="{{item.icon}}" style="font-size:24px;color: {{selected === index ? '#2a5ceb': '#444444'}};" />
</view>
<view class="text" style="font-weight:600;font-size:12px;color: {{selected === index ? '#2a5ceb': '#444444'}};">{{item.text}}</view>
</view>
</view>


真的不闪烁了哎!!!!接下来就自己调样式啦~~
最终建议,大家不要用这个了,搞个单页面应用好了,这个真的不好用

解决微信小程序 自定义tabBar 切换时候闪烁问题的更多相关文章
- 微信小程序自定义 tabbar
一定的需求情况下,无法使用小程序原生的 tabbar 的时候,需要自行实现一个和 tabbar 功能一模一样的自制组件. 查阅了海量的博客和文档之后,亲自踩坑.总结了三种在不使用微信小程序原生 tab ...
- 微信小程序自定义tabbar的实现
微信小程序自定义tabbar的实现 目的:当采用微信的自定义tabbar组件的时候,切换的时候会出现闪屏的效果:当使用微信默认的tabbar的时候,限制了tabbar的数量以及灵活配置. 方案:自己动 ...
- 微信小程序自定义tabbar的问题
个人感觉小程序的tab样式自定义的能力有所欠缺,不够美观,于是今天自己diy了一个tab 测试的时候发现,无论是使用navigator跳转(会出现点击的效果)还是用bindtap(触摸),因为没有定义 ...
- 微信小程序 自定义tabbar实例
在小程序的开发文档中,对tabbar是这样说明的: 如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 t ...
- 微信小程序自定义TabBar
项目中需要根据用户角色控制TabBar中各Item的显示和隐藏,然而小程序自带TabBar没有提供隐藏某个item的功能,只好自己动手写了一个. 1.wxml文件 <view class=&qu ...
- 微信小程序 - 自定义tabbar
更新: 2019-1-18:自定义tabbar组件已发布 各种奇葩的需求,造就了我们 wxml <view class="nav-tabs"> <view cla ...
- 微信小程序——自定义菜单切换栏tabbar组件
效果图: wxml代码: <view class="top_tabbar" > <block wx:for="{{itemName}}" wx ...
- 微信小程序 - 自定义tabbar(组件)
配置项(关于使用组件) index.wxml <!-- tabBar:tabBar配置 activeIndex: 激活页面下标 slots: 多插槽配置(需与页面一致) --> <t ...
- 微信小程序 - 自定义switch切换(示例)
点击下载:switch示例 ,适用于表单,官方switch 说明 .
- 如何解决微信小程序界面适配问题-引用-生命周期回调函数-优化机制-样式引入
如何解决微信小程序界面适配问题 .wxss page{ height: 100%; width:750rpx; } this.setData({ imageWidth: wx.getSystemInf ...
随机推荐
- 10.异步mysql
python中操作mysql连接.操作.断开都是网络IO #安装支持异步aiomysql的模块 pip3 install aiomysql async def execute(): # 网络IO操作, ...
- 更改DataFrame列顺序
使用pandas进行数据分析的时候,有时会由于各种需求添加了一些列.可是列的顺序并不能符合自己的期望.这个时候就需要对于列的顺序进行调整. import numpy as np import pand ...
- 【YOLOv5】手把手教你使用LabVIEW ONNX Runtime部署 TensorRT加速,实现YOLOv5实时物体识别(含源码)
前言 上一篇博客给大家介绍了LabVIEW开放神经网络交互工具包[ONNX],今天我们就一起来看一下如何使用LabVIEW开放神经网络交互工具包实现TensorRT加速YOLOv5. 以下是YOLOv ...
- Redis系列8:Bitmap实现亿万级数据计算
Redis系列1:深刻理解高性能Redis的本质 Redis系列2:数据持久化提高可用性 Redis系列3:高可用之主从架构 Redis系列4:高可用之Sentinel(哨兵模式) Redis系列5: ...
- gin框架——使用viper读取配置
什么是viper Viper是Go应用程序的完整配置解决方案,包括12-Factor(也称为"十二要素",是一套流行的应用程序开发原则. 其实我也不是很清楚)应用程序.它被设计为在 ...
- Atcoder beginner contest 249 C-Just K(二进制枚举)
题目大意:给你N个字符串,你可以从中选择任意数量的字符串,请统计在你的字串中,相同字母出现次数正好为K次的字母数.数据保证出现的字母都是小写字母. 1≤N≤15 1 ≤K≤N 一开始读题的时候读错了, ...
- Linux操作系统,笔录!
1.Linux 1.1.Linux介绍: Linux是一套免费使用和自由传播的类Unix操作系统,是一个基于POSIX和UNIX的多用户.多任务.支持多线程和多CPU的操作系统.它能运行主要的UNIX ...
- java安全之CC1浅学(2)
前言 上一篇了解了commons-collections中的Transformer,并且构造了一个简单的payload,接下来就需要将其改造为一个可利用的POC AnnotationInvocatio ...
- 2022春每日一题:Day 14
题目:字符串归类 发现字符串长度总数不大,因此把每个字符串有的字母分离,存放到桶中,再枚举合并即可,时间复杂度O(len) 赛时代码: #include <cstdio> #include ...
- [排序算法] 双向冒泡排序 (C++)
前言 本文章是建立在冒泡排序的基础上写的,如还有对 冒泡排序 不了解的童鞋,可以看看这里哦~ 冒泡排序 C++ 双向冒泡排序原理 双向冒泡排序 的基本思想与 冒泡排序还是一样的.冒泡排序 每次将相邻的 ...