微信小程序自定义tabbar容易遇到的问题

这篇具有很好参考价值的文章主要介绍了微信小程序自定义tabbar容易遇到的问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.自定义tabbar不生效:

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

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

  解决方法如下:

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

onShow(){
    if (typeof this.getTabBar === 'function' && this.getTabBar()) {
      this.getTabBar().setData({
        selected: 2,
        active: getApp().globalData.selected
      })
      console.log(this.getTabBar().__data__.selected)
      this.setData({
        active:this.getTabBar().__data__.selected
      })
    }
}

 3.切换闪烁问题:

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

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

微信小程序tabbar的selected,前端,javascript,微信小程序文章来源地址https://www.toymoban.com/news/detail-634509.html

到了这里,关于微信小程序自定义tabbar容易遇到的问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 解决微信小程序 自定义tabBar 首次切换时候闪烁问题(实测)

    按照官方自定义tabBar: 配置信息 在 app.json 中的 tabBar 项指定 custom 字段,同时其余 tabBar 相关配置也补充完整。 所有 tab 页的 json 里需声明 usingComponents 项,也可以在 app.json 全局开启。 我的示例: 添加 tabBar 代码文件 在代码根目录下添加入口文件 custom-tab-bar :必须与pages在同

    2024年02月14日
    浏览(39)
  • 微信小程序自定义tabBar

    首页 分类 留言 我的 /components/index-tabbar/index.js Component({ properties: { active: { type: String, value: ‘index’ }, }, methods: { onChange(event) { wx.redirectTo({ url: /pages/${event.detail}/index , }) } } }) 模拟的 tabbar 页面写法如下: /pages/home/index.json { “usingComponents”: { “index-tabbar”: “/components/index-ta

    2024年04月24日
    浏览(66)
  • 微信小程序——自定义底部tabBar

    目录  实现步骤 1、配置信息 2、添加代码文件。  3、在该目录下编写代码即可。 二、在app.json里面添加tabBar配置 三.、在custom-tab-bar添加配置 1. 在custom-tab-bar创建如下目录 2.给index.wxml添加tabBar的结构代码   3. 给index.js 添加数据配置 和 事件方法 4. 给index.wxss 添加样式 四、

    2024年02月16日
    浏览(56)
  • 微信小程序自定义tabBar使用

    自定义使用tabbar步骤 文章目录 一、为什么要使用自定义tabBar? 二、使用步骤 总结 微信小程序官方默认的tabbar有很多局限性,比如无法调整图片和文字大小、不能动态调整个数等。 小程序开发版本:RC Build (1.06.2206271) 在小程序开发文档中找到指南--》基础能力--》自定义tab

    2024年02月09日
    浏览(57)
  • 微信小程序自定义tabBar简易实现

    index.wxml index.json index.js index.css 如果是componet的页面就直接再show中自己定义它的selected代表当前的选中态

    2024年02月03日
    浏览(43)
  • 微信小程序自定义tabBar(边框圆角)

    先看看自定义tabBar的效果     可能图片效果不是很明显,我用红框框出来了,这样看起来明显一点。 接下来就是具体步骤了  先在pages里建两个文件夹,我现在做的项目tabBar只有两个,所以我建了两个文件夹,如果大于两个用这个方法也可以,但是不能多于五个。 app.json中

    2024年02月08日
    浏览(52)
  • 微信小程序自定义tabbar【中间凸起样式】

    效果预览 微信开发文档:自定义tabBar 一、配置信息 在 app.json 中的 tabBar 中指定 custom 字段为 true【允许使用自定义 tabBar】 在所有 tab 页 json 中申明usingComponents 项,或者在 app.json 中全局开启 在 list 中指定自己需要 tab 示例 二、添加 tabBar 代码文件 在代码根目录下添加custom-

    2024年02月10日
    浏览(51)
  • 微信小程序使用uniapp自定义tabbar

    第一步:在pages.json里定义自己tabbar路径,定义的时候只需要写上页面路径即可  第二步:自定义tabbar页面,为了实现点击动作的动态效果,需要用到watch监听父组件传来的值的改变  自定义tabbar页面全部代码 注:该页面可以直接用组件的方式来放,因为uniapp支持easycom模式,

    2024年02月13日
    浏览(47)
  • 微信小程序子页面自定义tabbar组件

    有时候微信小程序会遇到代码合并,就比如把B小程序代码迁移到A小程序,要使得B作为A小程序的一个子页面子功能。因为本身小程序都有tabbar,原来B也有,这时候就要给B子功能自定义一个tabbar底部导航栏。(注意,这个不是微信小程序自定义tabBar,不需要app.json中设置一个

    2024年02月08日
    浏览(51)
  • 微信小程序自定义tabBar,前端开发技能

    首页 分类 留言 我的 /components/index-tabbar/index.js Component({ properties: { active: { type: String, value: ‘index’ }, }, methods: { onChange(event) { wx.redirectTo({ url: /pages/${event.detail}/index , }) } } }) 模拟的 tabbar 页面写法如下: /pages/home/index.json { “usingComponents”: { “index-tabbar”: “/components/index-ta

    2024年04月22日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包