更新记录
1.0.0(2024-07-24) 下载此版本
初版完成,功能上传
平台兼容性
uni-app
Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
---|---|---|---|---|---|---|---|---|
√ | - | √ | √ | √ | - | - | - | - |
微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
---|---|---|---|---|---|---|---|---|---|---|
√ | - | - | - | - | - | - | - | - | - | - |
页面通知飘浮插件
此插件为通知提示飘浮插件,将一个通知类的元素组件在屏幕中飘浮而过,具体效果可查看效果图
兼容app端、小程序端等...
- 传参使用
参数名 | 类型 | 默认 | 说明 |
---|---|---|---|
mode | String.Enum | left | 通知的展示形式,枚举值有【'left','right'】,分别代表通知悬浮窗从左边向右边展示,和右向左展示 |
beforText | String | 欢迎 | 通知内容的前段的文字 |
afterText | String | 加入直播间 | 通知内容的中间的文字 |
userName | String | 用户 | 通知内容的后段的文字 |
isConnect | Boolean | false | 是否支持多个通知衔接滚动播放 |
isImmediatelyEnd | Boolean | false | 当通知在滚动时,是否立即结束动画,然后开启下一个通知 |
-
内部方法:start()
fei-nocice-enter-item内部有start()方法,通过this.$refs去调用即可。(具体可查看完整示例的代码)
-
完整示例
<template> <view > <button @click="rightTo">右往左停留模式</button> <button @click="leftTo" style="margin-bottom:30px;">左往右飘过模式</button> <fei-nocice-enter-item ref="noticeRef" :mode="mode" :isConnect="isConnect" :isImmediatelyEnd="isImmediatelyEnd"></fei-nocice-enter-item> </view> </template> <script> export default { data() { return { mode:"", isConnect:false,//是否支持多个通知衔接滚动播放 isImmediatelyEnd:true,//当通知在滚动时,是否立即结束动画,然后开启下一个通知 } }, methods: { rightTo(){ this.mode="right"; this.start(); }, leftTo(){ this.mode="left"; this.start(); }, start(){ this.$refs.noticeRef.start(); } } } </script>