微信小程序 MinUI组件库系列之badge徽章组件示例(2)

<template> <view> <image src="https://s10.mogucdn.com/mlcdn/c45406/171019_20e8ac6bcjb67f9i8b88j2aiiil03_200x200.jpg"></image> <wxc-badge max="99" value="230"></wxc-badge> </view> </template> <script> export default { config: { usingComponents: { 'wxc-badge': '@minui/wxc-badge' } }, data: {} } </script> <style> .user { width: 100rpx; height: 100rpx; position: relative; } .user__avatar { display: block; width: 100rpx; height: 100rpx; border-radius: 50%; } .user__un-read-msg-count { position: absolute; top: -16rpx; right: -18rpx; } </style>

图示：

3、个性化设置

<template> <view> <image src="https://s10.mogucdn.com/mlcdn/c45406/171019_7i7cf28a75h4jac3hidkc4c3j4e7i_200x200.png"></image> <wxc-badge>new</wxc-badge> </view> </template> <script> export default { config: { usingComponents: { 'wxc-badge': '@minui/wxc-badge' } }, data: {} } </script> <style> .message { width: 100rpx; height: 100rpx; position: relative; } .message__avatar { display: block; width: 100rpx; height: 100rpx; } .message__badge { position: absolute; top: -16rpx; right: -18rpx; } </style>

图示：

4、红点模式

<template> <view> <image src="https://s10.mogucdn.com/mlcdn/c45406/171019_7i7cf28a75h4jac3hidkc4c3j4e7i_200x200.png"></image> <wxc-badge type="dot">30</wxc-badge> </view> </template> <script> export default { config: { usingComponents: { 'wxc-badge': '@minui/wxc-badge' } }, data: {} } </script> <style> .message { width: 100rpx; height: 100rpx; position: relative; } .message__avatar { display: block; width: 100rpx; height: 100rpx; } .message__badge { position: absolute; top: -20rpx; right: -2rpx; } </style>

更多组件更新同步请关注 MinUI 小程序组件库示例查看，或请移步到实时同步更新的

相关链接

开源组件

基础元件

功能组件

提示反馈