• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序自定义tabbar以及遇到的一些问题

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

最近开始小程序遇到tabbar需要自定义,在其中开发时遇到很多BUG

项目使用的是vant-weapp以及微信小程序原生

1.自定义tabbar(先看官网demo

  首先在与pages同级建立一个文件夹custom-tab-bar(注意名称必须是custom-tab-bar),以及创建一个名称为index的Component组件

 

然后引入vant的tabbar,引入vant需要配置custom-tab-bar里面的index.json文件里面的usingComponents(或者也可以app.json全局配置),如下:

 

 

 custom-tab-bar里面的index.wxml里面:

 

 custom-tab-bar里面的index.js里面:

 

 

 

 

另外在app.json里面进行配置:

 custom:true,开启tabbar自定义

 

 

 效果如下:

 

 

 

 

使用自定义tabbar容易遇到的问题:

1.自定义tabbar不生效:

  原因文件名称不正确,必须使用custom-tab-bar命名

2.切换延迟问题,如A→B,需要点击两次icon才能正确选中

  解决方法如下:

   在跳转的页面的show生命周期里面加上,activeIndex是custom-tab-bar里面当前设置选中下标的参数名,而值是对应tabbar数组里面对应的下标

  

 

 3.切换闪烁问题:

  如A→B,切换的时候页面会闪烁一下,解决方法:

  注释掉custom-tab-bar里面index.js里切换事件的this.setData

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
小程序中that和this的指向问题发布时间:2022-07-18
下一篇:
微信小程序之动态生成二维码并处理成本地图片 - jessie-xian发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap