npm install -g @mindev/min-cli

min init my-project

cd my-project

min install @minui/wxc-badge

min dev

export default {
 config: {
 "usingComponents": {
  'wxc-badge': "@minui/wxc-badge"
 }
 }
}

<wxc-badge class="user__un-read-msg-count">9</wxc-badge>

<!-- home/index.wxp -->
<template>
 <view class="user">
 <image class="user__avatar" src="/UploadFiles/2021-04-02/171019_21c2fgdl406e80id5fa5hdckkh804_356x356.png">

图示：

至此，minui 组件库的 badge 徽章组件在 Min 工具生成的小程序项目中的方法已介绍完毕，其他场景，在原生小程序或其他小程序框架项目中的使用方式请移步至如下链接：
在已有小程序项目中使用 MinUI 组件介绍
了解组件的使用方式后，下面开始介绍 badge 组件的 API 。
Badge


  
    
      属性
      描述
    
  
  
    
      value
      [可选] 设置数值，优先级会高于标签内嵌套值
    
    
      max
      [可选] 设置最大边界，越界数值显示为 maxVal+
    
    
      type
      [可选] 设置标记类型，职位 dot 显示为弱提示的圆点
    
  


更多demo
1、vaule 传值


<template>
 <view class="user">
 <image class="user__avatar" src="/UploadFiles/2021-04-02/171019_21c2fgdl406e80id5fa5hdckkh804_356x356.png">

图示：

2、设置最大边界值


<template>
 <view class="user">
 <image class="user__avatar" src="/UploadFiles/2021-04-02/171019_20e8ac6bcjb67f9i8b88j2aiiil03_200x200.jpg">

图示：

3、个性化设置


<template>
 <view class="message">
 <image class="message__avatar" src="/UploadFiles/2021-04-02/171019_7i7cf28a75h4jac3hidkc4c3j4e7i_200x200.png">

图示：

4、红点模式



<template>

 <view class="message">
 <image class="message__avatar" src="/UploadFiles/2021-04-02/171019_7i7cf28a75h4jac3hidkc4c3j4e7i_200x200.png">


更多组件更新同步请关注 MinUI 小程序组件库示例查看，或请移步到实时同步更新的 微信小程序 badge 徽章组件使用文档 。
相关链接

  
Min-Cli 官方仓库 
  
MinUI 官方仓库 
  
Min 官方文档 

开源组件

  

  
布局元素
  

    
flex 布局 
    
cc 水平垂直居中 
  
  
  

  
基础元件
  

    
avatar 头像 
    
badge 徽章 
    
elip 文本截断 
    
icon 图标 
    
label 标签 
    
loadmore 页底提示 
    
price 价格 
    
progress 进度条 
  
  
  

  
功能组件
  

    
abnor 异常流展示 
    
countdown 倒计时 
    
counter 数字框 
    
loading 加载提示 
    
mask 遮罩层 
    
steps 步骤条 
    
tab 选项卡 
  
  
  

  
提示反馈
  

    
dialog 对话框 
    
popup 弹出层 
    
toast 提示框 
  
  
  

  
表单组件
  

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

                                
                                

                                    微信小程序,badge徽章组件,微信小程序,MinUI组件库 
                                
华山资源网 Design By www.eoogi.com
                            
                        
                        

                            

                                广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）

                                免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
                            
                        
                        

                            

                                
                                    上一篇
                                    
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
                                
                            
                            

                                
                                    下一篇
                                    
获取layer.open弹出层的返回值方法
                                
                            
                        
                        
                        
华山资源网 Design By www.eoogi.com
                        

                            

                                
                                
                                    评论“微信小程序 MinUI组件库系列之badge徽章组件示例”
                                
                            
                            

                                

                                    

                                        

                                            

                                                

                                                    
                                                
                                                

                                                    
                                                
                                                

                                                    

                                                    

                                                    

                                                
                                                

                                                     再想想
                                                    
                                                    
                                                    
                                                    
                                                    
                                                
                                            
                                            

                                        
                                    
                                    

                                    

                                        
暂无评论...