解决微信小程序 自定义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 ...
随机推荐
- C++ 不知树系列之初识树(树的邻接矩阵、双亲孩子表示法……)
1. 前言 树是一种很重要的数据结构,最初对数据结构的定义就是指对树和图的研究,后来才广义化了数据结构这个概念.从而可看出树和图在数结构这一研究领域的重要性. 树和图重要的原因是,它让计算机能建模出现 ...
- FTP文本传输协议
一.存储类型 存储类型分为三种: 直连式存储:Direct-Attached Storage,简称DAS 网络附加存储:Network-Attached Storage,简称NAS(存储和管理空间都在 ...
- String基础: String两种创建对象方式的比较
字符串常量 在一般的语言中常量一旦声明则不可改变,在java中的字符串常量是以匿名对象来表示的 javaz中字符串两种定义方法: String strA= new String("hello ...
- UBOOT编译--- make xxx_deconfig过程详解(一)
make xxx_deconfig过程详解 1. 前言 2. 概述 3. build变量的定义 4. 目标%config的定义 4.1 依赖 scripts_basic 4.1.1 语句$(if $ ...
- vue传值
在vue 中组件间的传参是必不可少的,下面说下几种传参方式 1.父组件传值给子组件,首先父组件发送的形式是用bind(用缩写:)绑定值到子组件身上.然后子组件用属性props接收 2.子组件传值父组件 ...
- zabbix6.0安装
一.简述 zabbix6.0 对相关软件版本要求较高,需要php7.25以上php8.0以下版本支持,若使用mysql数据库,其最低要求为mysql8.0,本此搭建采用的是使用较广的lnmp架构 za ...
- bugku 计算器
打开就一个输入框和验证,尝试后发现输入框限制了位数,这还不简单,F12直接修改表单长度试试 成功得到flag
- Objects.requireNonNull的意义是什么
Objects.requireNonNull方法的源码是这样: public static <T> T requireNonNull(T obj) { if (obj == null) t ...
- python3小技巧总结(实时更新)
1.列表解析 如果一个想将一个列表中的大于0的数字过滤,一般可能会用到lambd结合filter,或者就是直接遍历,不过最好的解决办法是这样: b = [1,0,-1,-2] a = [i for i ...
- PLSql在Oracle中创建表空间
create tablespace db_test --表空间名 datafile 'D:\oracle\product\11.2.0\dbhome_1\oradata\orcl\test.dbf' ...