Tencent / tdesign-miniprogram

A Wechat MiniProgram UI components lib for TDesign.
https://tdesign.tencent.com/miniprogram
MIT License
1.18k stars 272 forks source link

[TabBar 标签栏] 小红点显示与隐藏有没有调用方法 #3064

Closed MLIOFMD closed 2 weeks ago

MLIOFMD commented 1 month ago

这个功能解决了什么问题

小红点显示或者隐藏api。我也是现学先用微信小程序,没有找到你们这个小红点隐藏怎么使用,如果有其他小伙伴有方法,可以发我一份demo,非常感谢。

你建议的方案是什么

如点击tabbar切换到页面后,进行操作,取消小红点,能提供调用。

anlyyao commented 1 month ago

@MLIOFMD https://tdesign.tencent.com/miniprogram/components/tab-bar?tab=demo,官网示例——"弱选中标签栏"

<t-tab-bar t-class="t-tab-bar" defaultValue="label1" split="{{false}}">
  <t-tab-bar-item badge-props="{{ {count: 16} }}" ariaLabel="首页,有16条消息" value="label1" icon="home"
    >首页</t-tab-bar-item
  >
  <t-tab-bar-item badge-props="{{ { dot: false } }}" ariaLabel="软件,有新的消息" value="label2" icon="app"
    >软件</t-tab-bar-item
  >
  <t-tab-bar-item badge-props="{{ {count: 'New'} }}" ariaLabel="聊天,New" value="label3" icon="chat"
    >聊天</t-tab-bar-item
  >
  <t-tab-bar-item badge-props="{{ {count: '···'} }}" ariaLabel="我的,有很多消息" value="label4" icon="user"
    >我的</t-tab-bar-item
  >
</t-tab-bar>

小红点显示隐藏、徽标内容主要是依赖 badgeProps 属性,具体使用请查看官网文档

MLIOFMD commented 3 weeks ago

@MLIOFMD https://tdesign.tencent.com/miniprogram/components/tab-bar?tab=demo,官网示例——"弱选中标签栏"

<t-tab-bar t-class="t-tab-bar" defaultValue="label1" split="{{false}}">
  <t-tab-bar-item badge-props="{{ {count: 16} }}" ariaLabel="首页,有16条消息" value="label1" icon="home"
    >首页</t-tab-bar-item
  >
  <t-tab-bar-item badge-props="{{ { dot: false } }}" ariaLabel="软件,有新的消息" value="label2" icon="app"
    >软件</t-tab-bar-item
  >
  <t-tab-bar-item badge-props="{{ {count: 'New'} }}" ariaLabel="聊天,New" value="label3" icon="chat"
    >聊天</t-tab-bar-item
  >
  <t-tab-bar-item badge-props="{{ {count: '···'} }}" ariaLabel="我的,有很多消息" value="label4" icon="user"
    >我的</t-tab-bar-item
  >
</t-tab-bar>

小红点显示隐藏、徽标内容主要是依赖 badgeProps 属性,具体使用请查看官网文档

非常感谢你的回复。我研究了,确实没看明白怎么使用的,希望能指点一二。我是自定义tabbar就是你们demo,有个消息页面,现在点击底部tab消息按钮,显示消息列表页面,然后点击进入聊天,然后返回,这时候取消小点,怎么传递什么值到自定义tabbar页面取消小点呢,如方便有举例最好,非常感谢。

MLIOFMD commented 3 weeks ago
badge-props="{{ { dot: false } }}"

就比如这个,怎么送值进去,我看正常都是这种 badge-props="{{ dot }}",两个大括号,我尝试各种办法最好连值都送不进去这个

anlyyao commented 3 weeks ago
badge-props="{{ { dot: false } }}"

就比如这个,怎么送值进去,我看正常都是这种 badge-props="{{ dot }}",两个大括号,我尝试各种办法最好连值都送不进去这个

badgeProps 是一个对象。你用 badge-props="{{ dot }}" ,就需要在data中将dot定义成对象并赋值。

data: {
    dot: { dot: false },
  },
anlyyao commented 3 weeks ago
badge-props="{{ { dot: false } }}"

就比如这个,怎么送值进去,我看正常都是这种 badge-props="{{ dot }}",两个大括号,我尝试各种办法最好连值都送不进去这个

badgeProps 是一个对象。你用 badge-props="{{ dot }}" ,就需要在data中将dot定义成对象并赋值。

data: {
    dot: { dot: false },
  },

后续更新,依旧是通过setData,可参考片段 https://developers.weixin.qq.com/s/8Kl2Ftm37qTu

anlyyao commented 3 weeks ago

建议你加一下用户群吧,常规使用问题,你在群里提问,很快就知道问题和解决方案,issue 一般是提bug和需求