欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

uni-app开发的商城通用淡入淡出消息组件

程序员文章站 2022-07-01 21:02:40
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'
	}
]

下载地址

uni-app市场下载地址

uni-app开发的商城通用淡入淡出消息组件

本文地址:https://blog.csdn.net/leneven1/article/details/107380737

相关标签: uni-app