更新记录
1.0.0(2025-08-01)
2025/07/28 数字滚动特效插件发布
平台兼容性
uni-app(4.06)
Vue2 |
Vue3 |
Chrome |
Safari |
app-vue |
app-nvue |
Android |
iOS |
鸿蒙 |
√ |
√ |
√ |
√ |
- |
- |
- |
- |
- |
微信小程序 |
支付宝小程序 |
抖音小程序 |
百度小程序 |
快手小程序 |
京东小程序 |
鸿蒙元服务 |
QQ小程序 |
飞书小程序 |
快应用-华为 |
快应用-联盟 |
√ |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
uni-app x(4.06)
Chrome |
Safari |
Android |
iOS |
鸿蒙 |
微信小程序 |
- |
- |
- |
- |
- |
- |
其他
- 使用说明:
<RollNumber :width="70" :height="90"
:rollBoxStyle="rollBoxStyle"
:rollItemStyle="rollItemStyle"
:value="total" />
const total = ref('000000.00')
onMounted(()=>{
setTimeout(()=>{
total.value = '8273.641'
},2000)
})
const rollBoxStyle = { // 设置整体盒子背景为蓝色
backgroundColor: 'blue',
}
const rollItemStyle = { // 设置单个数字背景为红色,字体颜色为红色
backgroundColor: 'red',
color: '#fff',
marginRight: '2rpx'
}
- width:设置数字宽度,默认50;
- height:设置数字以及整体高度,默认50;
- rollBoxStyle设置整体滚动盒子的样式,默认无样式;
- rollItemStyle设置单个数字盒子的样式,默认无样式;
- value是要显示的值,支持小数点。
PS: 在web端和微信小程序中样式展示以及功能均正常,但是在支付宝小程序和抖音小程序的开发工具中测试发现存在数字因定位两边对不齐的情况,其他小程序和快应用未做测试。