平台兼容性
uni-app
app-vue |
app-nvue |
app-android |
app-ios |
? |
? |
? |
? |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
? |
? |
? |
? |
? |
? |
? |
? |
? |
uni-app x
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
属性 |
说明 |
类型 |
默认值 |
dot |
不展示数字,只有一个小红点,如需隐藏 dot ,需要设置 count 为 0 |
Boolean |
false |
count |
显示的数字,大于 maxCount时,显示 ${maxCount}+,为 0 时隐藏 |
Number |
0 |
maxCount |
展示封顶的数字值 |
Number |
99 |
<template>
<view class="app">
<view class="cell">
<min-badge dot>
<view class="test"></view>
</min-badge>
</view>
<view class="cell">
<min-badge count="10" maxCount="9">
<view class="test"></view>
</min-badge>
</view>
<view class="cell">
<min-badge count="9">
<view class="test"></view>
</min-badge>
</view>
<view class="cell">
<min-badge count="99">
<view class="test"></view>
</min-badge>
</view>
<view class="cell">
<min-badge count="100">
<view class="test"></view>
</min-badge>
</view>
</view>
</template>
<script>
import minBadge from '@/components/min-badge/min-badge'
export default {
components: {
minBadge
}
}
</script>
<style lang="scss" scoped>
.app {
padding: 22rpx;
}
.cell {
margin: 22rpx;
}
.test {
width: 100rpx;
height: 100rpx;
background: #dddddd;
}
</style>