更新记录
1.0.1(2025-06-11) 下载此版本
新增滚动文字粗细设置,修改渐变色方向设置和点击滚动文字事件的参数。
1.0.0(2023-08-28) 下载此版本
首次发布
平台兼容性
uni-app
Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | √ | - | - | - |
微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
---|---|---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | √ | - | √ | √ | √ | √ |
其他
多语言 | 暗黑模式 | 宽屏模式 |
---|---|---|
× | × | √ |
hy-notice-bar
hy-notice-bar
是一个可水平和竖直展示的滚动通知栏
1.属性说明
属性名 | 类型 | 说明 |
---|---|---|
id | String | 需要传入的id值。 |
text | String | 滚动文字 |
fontSize | Int | 文字大小 |
fontWeight | Int/String | 文字粗细 (100~900、normal、bold等) |
speed | Int | 滚动速度 ,默认5,数字越小速度越快,表示多长时间滚动一次,单位为秒 |
color | String | 文字的字体颜色 |
backgroundColor | String | 背景颜色,默认:#fff |
scrollable | Bool | 是否滚动,默认true |
scroll | Bool | 是否水平,默认true |
JB | Array | 渐变色 数组第一项为渐变方向,之后为渐变颜色,最多5个渐变色 |
@toDetail | EventHandle | 点击组件事件,第一项为滚动文字,第二项为传入id值 |
2.使用示例
页面:
<template>
<view class="content">
<hy-notice-bar :id='id' @toDetail="Detail" font-size="100" speed="12" scrollable="false" :scroll="false" text="桂棹兮兰桨,击空明兮溯流光。渺渺兮予怀,望美人兮天一方。" :JB='jb'></hy-notice-bar>
</view>
</template>
script:
export default {
data() {
return {
id:'123',
jb:[
'to top right' //可以直接填方向英文,注意前面加“to”,也可以填角度值,如:“45deg”
,'red'
,'pink'
,'orange'
,'green'
,'blue'
]
}
},
methods: {
Detail(text,id){
console.log(text,id);
},
}
}