更新记录
1.0.3(2024-08-16)
下载此版本
1.修复:页面bug
1.0.2(2024-08-16)
下载此版本
1.新增:外边距:margin属性
1.0.1(2024-08-07)
下载此版本
1.优化:代码
查看更多
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
× |
√ |
√ |
√ |
√ |
√ |
√ |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
√ |
√ |
√ |
√ |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
云函数类插件通用教程
使用云函数类插件的前提是:使用HBuilderX 2.9+
star-notice-bar
star-notice-bar
组件,用于实现公告效果,支持点击跳转小程序内页面、跳转其他小程序、跳转网址、预览图片、观看视频和查看公告。
示例代码
<template>
<view style="background-color: #e8e8e8;height: 100vh;">
<star-notice-bar :oData="oData" :bgColor="bgColor" :color="color" :icon="icon" :mode="mode" :fontSize="fontSize"
:duration="duration" :category_id="category_id" :margin="margin"></star-notice-bar>
</view>
</template>
<script>
export default {
data() {
return {
oData: ["111", '222'],
category_id: '',
bgColor: '#fff',
color: '#00aaff',
icon: 'volume',
mode: 'link',
fontSize: '20',
duration: 1000,
margin: "0"
};
}
}
</script>
API
Props
名称 |
说明 |
类型 |
默认值 |
可选值 |
oData |
公告显示的内容,见上方"示例代码"说明 |
Array |
- |
- |
category_id |
公告分类id(从数据库拉取该分类项的所有数据,oData如果传值,该属性无效) |
String |
- |
- |
bgColor |
背景颜色 |
String |
#fff |
- |
color |
文字颜色 |
String |
#00aaff |
- |
icon |
左侧的音量图标,不显示:icon="false"或传空 |
String |
volume |
- |
mode |
通告模式,link-显示右箭头,closable-显示右侧关闭图标 |
String |
- |
link/closable |
fontSize |
字体大小 |
String |
14 |
- |
duration |
滚动一个周期的时间长,单位ms |
Number |
2000 |
- |
margin |
外边距 |
String |
0 |
- |
意见反馈
相关文章