解决微信小程序 自定义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 ...
随机推荐
- [Go疑难杂症]为什么nil不等于nil
现象 在日常开发中,可能一不小心就会掉进 Go 语言的某些陷阱里,而本文要介绍的 nil ≠ nil 问题,便是其中一个,初看起来会让人觉得很诡异,摸不着头脑. 先来看个例子: type Custom ...
- 三、Ocelot请求聚合与负载均衡
上一篇文章介绍了在.Net Core中如何使用Ocelot:https://www.cnblogs.com/yangleiyu/p/16847439.html 本文介绍在ocelot的请求聚合与负载均 ...
- ThreadLocal的使用及原理解析
# 基本使用 JDK的lang包下提供了ThreadLocal类,我们可以使用它创建一个线程变量,线程变量的作用域仅在于此线程内.<br />用2个示例来展示一下ThreadLocal的用 ...
- LoadRunner11脚本小技能之添加请求头+定义变量+响应内容乱码转换打印+事务拆分
一.添加请求头 存在一些接口,发送请求时需要进行权限验证.登录验证(不加请求头时运行脚本,接口可能会报401等等),所以需要在脚本中给对应请求添加请求头.注意:请求头需在请求前添加,包含url类.su ...
- 2022春每日一题:Day 37
题目:[USACO14FEB]Auto-complete S 字典树套路题,字典树优化剪枝,加个cnt标记即可 代码: #include <cstdio> #include <cst ...
- C#使用Task在Winform建立控件上的提示等待窗口,实现局部等待加载,不影响主线程(二)
效果图: 源码:(处理了亿点点细节) 链接:https://pan.baidu.com/s/18S1IgQBOyXgeGvhnU3nrKQ?pwd=jpq9提取码:jpq9 作者:兮去博客出处:htt ...
- bugku web基础$_POST
这道题也是让what=flag就行了 直接试试通过max hackbar来进行post传入 得到flag
- MybatisPlus多表连接查询一对多分页查询数据
一.序言 在日常一线开发过程中,多表连接查询不可或缺,基于MybatisPlus多表连接查询究竟该如何实现,本文将带你找到答案. 在多表连接查询中,既有查询单条记录的情况,又有列表查询,还有分页查询, ...
- 同时容器,k8s和docker区别是什么? 如何简单理解k8s和docker
1.k8s是一个开源的容器集群管理系统,可以实现容器集群的自动化部署.自动扩缩容.维护等功能. 2.Docker是一个开源的应用容器引擎,开发者可以打包他们的应用及依赖到一个可移植的容器中,发布到流行 ...
- 自定义RBAC(4)
您好,我是湘王,这是我的博客园,欢迎您来,欢迎您再来- 前面把RBAC的权限系统设计过程都讲清楚了,现在就来实现它.大致分这么几个步骤: 1.先定义出完整的权限系统表结构: 2.实现Entity.Da ...