这个闪烁真的很迷

我搜了一些资料,进行了以下步骤的操作

第一种解决办法 ,把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 切换时候闪烁问题的更多相关文章

  1. 微信小程序自定义 tabbar

    一定的需求情况下,无法使用小程序原生的 tabbar 的时候,需要自行实现一个和 tabbar 功能一模一样的自制组件. 查阅了海量的博客和文档之后,亲自踩坑.总结了三种在不使用微信小程序原生 tab ...

  2. 微信小程序自定义tabbar的实现

    微信小程序自定义tabbar的实现 目的:当采用微信的自定义tabbar组件的时候,切换的时候会出现闪屏的效果:当使用微信默认的tabbar的时候,限制了tabbar的数量以及灵活配置. 方案:自己动 ...

  3. 微信小程序自定义tabbar的问题

    个人感觉小程序的tab样式自定义的能力有所欠缺,不够美观,于是今天自己diy了一个tab 测试的时候发现,无论是使用navigator跳转(会出现点击的效果)还是用bindtap(触摸),因为没有定义 ...

  4. 微信小程序 自定义tabbar实例

    在小程序的开发文档中,对tabbar是这样说明的: 如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 t ...

  5. 微信小程序自定义TabBar

    项目中需要根据用户角色控制TabBar中各Item的显示和隐藏,然而小程序自带TabBar没有提供隐藏某个item的功能,只好自己动手写了一个. 1.wxml文件 <view class=&qu ...

  6. 微信小程序 - 自定义tabbar

    更新: 2019-1-18:自定义tabbar组件已发布 各种奇葩的需求,造就了我们 wxml <view class="nav-tabs"> <view cla ...

  7. 微信小程序——自定义菜单切换栏tabbar组件

    效果图: wxml代码: <view class="top_tabbar" > <block wx:for="{{itemName}}" wx ...

  8. 微信小程序 - 自定义tabbar(组件)

    配置项(关于使用组件) index.wxml <!-- tabBar:tabBar配置 activeIndex: 激活页面下标 slots: 多插槽配置(需与页面一致) --> <t ...

  9. 微信小程序 - 自定义switch切换(示例)

    点击下载:switch示例 ,适用于表单,官方switch 说明 .

  10. 如何解决微信小程序界面适配问题-引用-生命周期回调函数-优化机制-样式引入

    如何解决微信小程序界面适配问题 .wxss page{ height: 100%; width:750rpx; } this.setData({ imageWidth: wx.getSystemInf ...

随机推荐

  1. Redis数据结构(一)-Redis的数据存储及String类型的实现

    1 引言 Redis作为基于内存的非关系型的K-V数据库.因读写响应快速.原子操作.提供了多种数据类型String.List.Hash.Set.Sorted Set.在项目中有着广泛的使用,今天我们来 ...

  2. nginx+keepalived实现主从模式双机热备份

    主从模式就是一台机器提供服务,另一台机器作为备份机,当主机的服务停止时,备份机立刻接替主机的服务. 安装 安装nginx wget http://nginx.org/download/nginx-1. ...

  3. python渗透测试入门——取代netcat

    1.代码及代码讲解. 实验环境:windows10下的linux子系统+kali虚拟机 import argparse import socket import shlex import subpro ...

  4. <一>从指令角度了解函数堆栈调用过程

    代码 点击查看代码 #include <iostream> using namespace std; int sum(int a,int b){ int temp=0; temp= a + ...

  5. 设置CMD命令的初始目录

    本文提供两种方式,第一种通过打开桌面上的快捷方式实现,第二种可以通过 CMD 命令直接进入. 快捷方式 "开始 ---> 程序 ---> 附件",右键单击 " ...

  6. 「浙江理工大学ACM入队200题系列」问题 L: 零基础学C/C++52——计算数列和2/1,3/2,5/3,8/5......

    本题是浙江理工大学ACM入队200题第五套中的L题 我们先来看一下这题的题面. 题面 题目描述 有一分数序列:2/1,3/2,5/3,8/5,13/8,21/13,-- 计算这个数列的前n项和.注意: ...

  7. KeeWiDB的高性能修炼之路:架构篇

    数据也有冷热之分,你知道吗? 根据访问的频率的高低可将数据分为热数据和冷数据,访问频率高的则为热数据,低为冷数据.如果热.冷数据不区分,一并存储,显然不科学.将冷数据也存储在昂贵的内存中,那么你想,成 ...

  8. CB利用链及无依赖打Shiro

    前言 前面已经学习了CC1到CC7的利用链,其中在CC2中认识了java.util.PriorityQueue ,它在Java中是一个优先队列,队列中每一个元素有自己的优先级.在反序列化这个对象时,为 ...

  9. Day20:继承详解

    继承的理解 继承:对类进行抽象化:也就是将存在的类构造成新的类: 比如说学生是一个类,老师是一个类,那么我们可以将学生类和老师类收纳进人这个类:那么学生和老师则为子类(派生类).人为父类(基类):子类 ...

  10. python注释、变量、数据类型详细

    目录 1.python注释 2.PEP8规范 3.变量与常量 1.python中的变量 2.变量名的命名规范 3.常量的基本使用 1.python注释 什么是注释? 注释是对代码的解释说明,写注释是为 ...