微信小程序的tab栏显示缓慢优化

最新推荐文章于 2024-03-09 10:31:17 发布
最新推荐文章于 2024-03-09 10:31:17 发布
阅读量2.5k 收藏 2
点赞数
分类专栏： 微信小程序 文章标签： 微信小程序 tab 优化 显示缓慢
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/q_3352321698/article/details/85236446
版权

在写tab栏切换的时候很坑爹，当下拉刷新了很多数据之后，点击其他的百货啊什么的，高亮的效果跟随过来十分缓慢，导致就像页面卡顿，数据没有加载过来一样，其实数据早就到了，就是显示的很慢。

经过一位非同寻常的靓仔提示@阿猫阿狗哈    将@tap放在class前面，并且用在activef占位，这样只切换类名的时候替换的比直接清除的就会快很多，虽然很简单，但是简直快到飞起呀

对比图

橙子吃西瓜
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
小程序自定义tabBar tabBar切换颜色总是比点击慢一步
qq_41297837的博客
08-28 1642
最近想使用小程序的自定义 tabBar 功能，并使用了 vant-weapp 的 tabBar 组件 wxml js 想实现的效果 点击底部的不同 tab 后，页面切换的同时底部的图标也会相应变化 问题 点击底部 tab 后，页面切换了，但对应的图标没有变化，再点一次才会变化 举例 A B C 三个页面对应 tabA tabB tabC 开始是 A 页面，tab 图标为 tabA 点击 tabB 后切换到 B 页面，但底部的 tab 图标并没有切换到 tabB 再点击 tabC 后切换到 C
萌新求教，小程序页面跳转延迟问题....
weixin_33941350的博客
04-25 1731
在mpvue小程序开发中，遇到一个问题，当点击tab进行页面跳转时，存在明显的延迟对象。 如下图所示： 个人猜测产生问题可能的原因： 类似于移动端开发300毫秒点击延迟。 那么如果是这种原因的话，那么，下面这种情况又该怎么解释呢？ 从上面的图中可以看出，这里延迟并不严重。所以对于300ms点击延迟的原因，先存有疑点。 网络请求引起的延迟。 对于这种情况，上面的情况似乎都解释的清楚。 导航ta...
微信小程序之tabbar切卡
diaoxiao8834的博客
01-19 149
最近在研究小程序的时候，遇到了一个问题，就是tabbar切卡，在android上有fragment，在RN上也有提供一个第三方的组件来用，微信小程序，好像没有专门的一个组件来实现这个功能，度娘了大半天，虽然也有好多人实现过这样的功能，但是我发现要么是不符合我的需求，那么就是实现起来过于繁琐。于是我参考多个高手写的博客，实现出了一个符合自己需求的。先上代码。 先看js文件： 1...
微信小程序自定义tabbar切换延迟以及切换闪烁问题
m0_58575070的博客
11-15 2354
首先,吐槽一番,官方bug,好多年了,一直不解决....那我们就自己解决..
微信小程序（踩过的坑）- （2）请求切换太快，同步冲突
巴黎左岸 · 荼靡花开
04-26 1016
（1）问题，tab之间切换太快，其中一个请求还未响应，另外一个请求已经发起 （2）解决 wx.showLoading({ title: '加载中', mask:true }) // get请求 遮层罩弹框有些请求不需要时，则showLoadFlag传false,不传则为默认为true function getReq(env, url, head...
微信小程序下拉无法刷新
A_Runner的博客
12-19 2274
“美人自古如名将，不许人间见白头” 序 下拉刷新看似简单，但实现时遇到了一个问题，始终无法实现效果，故记录在此。 下拉刷新代码实现 在页面的.json配置文件中加入enablePullDownRefresh，以启用页面的下拉刷新功能，见官网配置项 "enablePullDownRefresh": true, 在页面的js里面加入监听事件，见官网onPullDownRefresh //下拉...
解决微信小程序 自定义tabBar 首次切换时候闪烁问题（实测）
weixin_44221219的博客
05-21 2387
最后将app.json内引入tabBar组件的 custom由true改为false，就不再闪烁了。在代码根目录下添加入口文件 custom-tab-bar :必须与pages在同一根目录下。好了，到这里基本是官方给出的方法，但是首次点击tabBar时，图标闪烁，试验了很多，都无效。这里的 selected：首页是0，之后依次排序。添加 tabBar 代码文件。编写 tabBar 代码。
微信小程序实现tab页面切换功能
12-29
效果图如下所示： wxml <scroll scroll-x=true class=ip_tab_comtainer> <view class=ip_tab_comtainer_padd> ...'ip_tab_item_s':'ip_tab_item_n'}} bindtap=onIpItemClick wx:key={{ip.id}} data-item={{ip
微信小程序滚动Tab实现左右可滑动切换
12-10
微信小程序滚动Tab实现左右可滑动切换 效果： 最终效果如上。问题： 1、tab标题总共8个，所以一屏无法全部显示。 2、tab内容区左右滑动切换时，tab标题随即做标记（active）。 3、当active的标题不在当前屏显示...
微信小程序 Tab页切换更新数据
08-31
在微信小程序中，Tab页切换更新数据是一种常见的需求，特别是在多页面应用中，用户在不同Tab之间切换时，可能需要保持或传递某些状态信息。在本文中，我们将深入探讨如何在微信小程序中处理Tab页切换时的数据更新...
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
11-30
看到今日头条小程序页面可以滑动切换，而且tab导航条也会跟着滚动，点击tab导航，页面滑动，切导航栏也会跟着滚动，就想着要怎么实现这个功能 像商城类商品类目如果做成左右滑动切换类目用户体验应该会好很多，我...
关于微信小程序tab-bar切换页面的问题
qq_33138785的博客
07-09 1607
使用微信小程序的tab-bar带来一个算不上bug的影响 tab-bar常用作微信小程序中切换页面。常见首页页面下面有“首页”，“详情”，“我的”三个按钮。我们点击按钮实现跳转到按钮相对应的页面。其中我们利用tab-bar中的wx.switchTab来实现无刷新跳转。这种方法跳转的好处就是不会去刷新页面，比如利用下面的“详情”按钮切换到详情页，详情页不会去刷新。因为详情页在进入小程序时已经加载完了。所以此时按钮切换既不会触发onShow(),也不会触发onLoad() 问题如下：如果...
微信小程序上下滑动卡顿 z-index设置不起作用
yhf
04-30 883
今天在尝试做个微信小程序时，在开发测试时好好的，但发到真机上测试时手势上拉下拉都感到明显的卡顿，底部的菜单也没有浮在最上层。经过查找最后发现问题出现在图片上，在添加图片时看文档， 当时看了一下也没有细看说明就使用了cover-image，结果出现了以上说的两个问题。后面看文档中写到： 其中有覆盖在原生组件之上的图片视图。后面改用image后正常，不得不说一下，标签列表里不放在一起，确实容易造成误解。最后要说的是我是做后端开发的。 ...
微信小程序页面始终停留在下拉状态的bug解决
qq_39743700的博客
03-01 870
解决方法 在index.js 的 onShow: function () { wx.startPullDownRefresh() }, 函数中，设置了打开页面的时候就立即下拉，并调用search()函数。 该函数的**wx.stopPullDownRefresh()**存在问题，现在已更换了函数执行逻辑，并在onShow中直接调用search()，暂时解决了问题。 ...
uniapp 小程序自定义tabbar及初次加载闪屏解决方案
weixin_42301688的博客
03-09 7204
uniapp自定义tabbar及解决闪屏问题
小程序Taro框架 自定义底部Tabbar，处理自定义Tab栏切换卡顿、闪烁
SAXX2的博客
03-04 2855
小程序Taro框架 自定义底部Tabbar，处理自定义Tab栏切换卡顿、闪烁
定义tabbar，以及解决原生微信小程序使用vant的tabbar的bug（点击俩次图标才正确激活）
最新发布
qq_44741577的博客
03-09 1588
custom-tab-bar用自定义组件的方式编写即可，用自定义组件的方式编写即可，该自定义组件完全接管 tabBar 的渲染。另外，自定义组件新增。在导入使用vant （tabbar）组件的时候，发现通过点击切换的方法来更改。路由跳转，会出现图标没用及时对应上，需要第二次点击才对应上的问题。接口，可获取当前页面下的自定义 tabBar 组件实例。的值，用来对应每个页面切换之后展示对应的图标。推荐使用vant的tabber组件。在每一个tab页面的。
md5中文加密问题
q_3352321698的博客
12-17 4169
        写项目的时候需要用到md5加密，测试的时候输入的文字一直是中文的，导致一直显示密文错误，死活找不到原因，然后找同事交流之后发现同事用我的代码测试是可以返回成功的，对比之后发现原来他一直使用的是数字以及英文来测试的，这就找到问题所在。 解决方法嘛就是把要输入的内容转成url然后再加密  encodeURI() ，在w3c里面是这样描述这个方法的，特此记录此篇   我是更新的...
微信小程序导航栏居中跟随tab滚动
09-07
微信小程序导航栏居中跟随tab滚动的实现可以通过以下步骤来进行： 1. 创建一个包含导航栏和tab的父容器，并设置其为flex布局，让子元素水平居中对齐。 2. 设置导航栏和tab的样式，可以使用flex布局或者其他方式，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值