更新记录
V1.0.2(2023-03-10)
升级uni_modules
V1.0.1(2023-03-09)
修改兼容
查看更多
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
× |
× |
√ |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
√ |
√ |
√ |
√ |
× |
√ |
√ |
√ |
liu-notice-bar适用于uni-app项目的通告栏向上循环滚动组件
本组件目前兼容微信小程序、H5
本组件支持通告栏向上循环滚动、点击
使用方式(uni_modules版本)
<liu-notice-bar :dataList="noticeList" @clickNotice="clickNotice"></liu-notice-bar>
export default {
data() {
return {
noticeList: [{
id: '11',
titile: '这里是第一条通知公告的内容,这里是第一条通知公告的内容'
},
{
id: '22',
titile: '这里是第二条通知公告的内容,这里是第二条通知公告的内容'
}
]
};
},
methods: {
//点击某一条通知公告
clickNotice(item) {
//item------通知公告信息
}
}
}
使用方式(非uni_modules版本)
<liuNoticeBar :dataList="noticeList" @clickNotice="clickNotice"></liuNoticeBar>
import liuNoticeBar from '@/components/liu-notice-bar/liu-notice-bar.vue'
export default {
components: {liuNoticeBar},
data() {
return {
noticeList: [{
id: '11',
titile: '这里是第一条通知公告的内容,这里是第一条通知公告的内容'
},
{
id: '22',
titile: '这里是第二条通知公告的内容,这里是第二条通知公告的内容'
}
]
};
},
methods: {
//点击某一条通知公告
clickNotice(item) {
//item------通知公告信息
}
}
}
属性说明
名称 |
类型 |
默认值 |
描述 |
noticeFontColor |
String |
#333333 |
字体颜色 |
noticeFontSize |
Number |
30 |
字体大小 |
noticeLineHeight |
Number |
60 |
通告栏高度 |
dataList |
Array |
[] |
通知列表 |