uni-app开发的商城通用淡入淡出消息组件
程序员文章站
2022-03-13 17:29:37
uni-app开发的通用Pengpai-FadeInOut 淡入淡出消息组件自已使用的组件, 百度没找到相关案例, 就自已做了一个, 觉得应该能帮助到大家, 由于是前端小白所以CSS摘取了ColorUI的部分代码, 感谢大神!有问题加我的QQ互相交流学习!QQ37361062参数说明参数类型默认值必选描述durationNumber2600否持续时间(毫秒)waitNumber3000否停留时间(毫秒)topNumber350否顶部距离(...
uni-app开发的通用Pengpai-FadeInOut 淡入淡出消息组件
自已使用的组件, 百度没找到相关案例, 就自已做了一个, 觉得应该能帮助到大家, 由于是前端小白所以CSS摘取了ColorUI的部分代码, 感谢大神!有问题加我的QQ互相交流学习!
QQ37361062
参数说明
参数 | 类型 | 默认值 | 必选 | 描述 |
---|---|---|---|---|
duration | Number | 2600 | 否 | 持续时间(毫秒) |
wait | Number | 3000 | 否 | 停留时间(毫秒) |
top | Number | 350 | 否 | 顶部距离(px) |
left | Number | 10 | 否 | 左边距离(px) |
radius | Number | 30 | 否 | 动画半径(px) |
loop | Boolean | True | 否 | 是否循环显示 |
list | Array/Object | [] | 是 | 数据列表 |
list参数格式参考
list: [
{
title: '踮起脚尖走向阳光 刚刚浏览本店',
img: 'https://wx.qlogo.cn/mmopen/vi_32/DYAIOgq83er0aq5WuQhWxXcQoQbSnSPywUheQrot5biaFxV47nF2OB0aegkH12q2A6VkGUBDfUVqiaqgzVCJJicDg/132'
},
{
title: '幸福的小女人 刚刚浏览本店',
img: 'https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTIOeUhleCNwcOoTtk9Y1zwmpw76FsmAr1bYcKia2AVPiapbtl34jac7SQgjMaibKDJCqjYaHwvmUh3IQ/132'
}
]
下载地址
本文地址:https://blog.csdn.net/leneven1/article/details/107380737